@touchvue/ui 1.0.0-beta.5 → 1.0.0-beta.51

package/lib/packages/components/calendar/src/calendar.vue2.js

@@ -5,14 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var index = require('../../../locale/index.js');
 var calendar = require('./calendar.js');
-var index$3 = require('../../button/index.js');
-var index$7 = require('../../grid/index.js');
-var index$4 = require('../../header/index.js');
-var index$2 = require('../../input/index.js');
-var index$6 = require('../../padding/index.js');
-var index$8 = require('../../card/index.js');
-var index$1 = require('../../tag/index.js');
-var index$5 = require('../../scroll/index.js');
+var index$2 = require('../../tag/index.js');
+var index$1 = require('../../scroll/index.js');
 var dis = require('../../../directives/dis/src/dis.js');
 var tip = require('../../../directives/tip/src/tip.js');
 var useWidthStyle = require('../../../hooks/useWidthStyle.js');
@@ -25,7 +19,7 @@ const __default__ = vue.defineComponent({
 var _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...__default__,
   props: calendar.calendarProps,
-  emits: ["change", "beforeChange", "close", "update:modelValue"],
+  emits: ["confirm", "change", "beforeChange", "close", "update:modelValue"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -40,15 +34,20 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const hour = vue.ref("0");
     const minute = vue.ref("0");
     const second = vue.ref("0");
+    const yearsData = vue.ref([]);
+    const monthsData = vue.ref([]);
+    const monthsRangeData = vue.ref([]);
+    const daysData = vue.ref([]);
+    const daysRangeData = vue.ref([]);
     const years = vue.ref([]);
     const days = vue.ref([]);
     const hours = vue.ref([]);
     const minutes = vue.ref([]);
     const seconds = vue.ref([]);
     const monthLayer = vue.ref(false);
-    const timeLayer = vue.ref(false);
     const tempYear = vue.ref(0);
-    const yearsPage = vue.ref(0);
+    const yearScrollRef = vue.ref(null);
+    const isClickFlag = vue.ref(false);
     const start = vue.ref({
       year: 0,
       month: 0,
@@ -60,6 +59,16 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       day: 0
     });
     const { widthStyle } = useWidthStyle.useWidthStyle(props.width);
+    const setClass = vue.computed(() => {
+      let arr = [];
+      if (props.type) {
+        arr.push(`type-${props.type}`);
+      }
+      if (props.size === "large") {
+        arr.push("size-large");
+      }
+      return arr;
+    });
     const dayText = vue.computed(() => {
       return (val) => {
         const dayStr = year.value + "-" + addZero(month.value) + "-" + addZero(val);
@@ -112,19 +121,14 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         const startVal = start.value.day || start.value.month ? getStringValue(start.value) : "";
         const endVal = end.value.day || end.value.month ? getStringValue(end.value) : "";
         return `${startVal},${endVal}`;
+      } else if (props.type === "months") {
+        return monthsRangeData.value.join(",");
+      } else if (props.type === "dates") {
+        return daysRangeData.value.join(",");
       } else {
         return getStringValue();
       }
     });
-    const maxHour = vue.computed(() => {
-      let max;
-      if (typeof props.max === "string") {
-        max = props.max.replace(/-/gi, "/");
-      } else {
-        max = props.max;
-      }
-      return new Date(max).getHours();
-    });
     const isDisableDay = vue.computed(() => {
       return (item) => {
         if (year.value && month.value && item.value) {
@@ -231,11 +235,14 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     vue.watch(
       () => props.modelValue,
       (val) => {
-        setData();
+        if (props.type !== "dates") {
+          setData();
+        }
         if (changeFrom.value === "out") {
           submitValue.value = val;
         }
-      }
+      },
+      { deep: true }
     );
     vue.watch(submitValue, (val) => {
       emit("change", val);
@@ -262,17 +269,76 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       },
       { deep: true }
     );
-    const initCalendar = () => {
-      if (props.type === "time") {
-        showTimeLayer();
+    vue.watch(
+      () => year.value,
+      () => {
+        if (!isClickFlag.value) {
+          goToCenter();
+        }
+      },
+      { deep: true }
+    );
+    const commonSetDayVal = () => {
+      if (props.type === "dates") {
+        const mValue = props.modelValue;
+        const mArray = mValue.split(",");
+        if (!mArray.length)
+          return;
+        let yearVal = new Date(mArray[mArray.length - 1]).getFullYear();
+        let monthVal = new Date(mArray[mArray.length - 1]).getMonth() + 1;
+        let dayVal = new Date(mArray[mArray.length - 1]).getDate();
+        if (year.value === yearVal && month.value === monthVal) {
+          day.value = dayVal;
+        } else {
+          day.value = null;
+        }
       } else {
-        timeLayer.value = false;
+        let yearVal = new Date(props.modelValue).getFullYear();
+        let monthVal = new Date(props.modelValue).getMonth() + 1;
+        let dayVal = new Date(props.modelValue).getDate();
+        if (year.value === yearVal && month.value === monthVal) {
+          day.value = dayVal;
+        } else {
+          day.value = null;
+        }
+      }
+    };
+    const handlerTop = () => {
+      var _a;
+      const minYear = Number(props.minYear || 1900);
+      if (Number(years.value[0]) <= minYear) {
+        return;
+      }
+      const scrollRef = (_a = yearScrollRef.value) == null ? void 0 : _a.$el;
+      if (!scrollRef)
+        return;
+      const scrollTop = scrollRef.scrollTop;
+      const newYears = setYearData(years.value[0] - 50);
+      const filteredYears = newYears.filter((year2) => year2 >= minYear);
+      if (filteredYears.length > 0) {
+        const originalScrollHeight = scrollRef.scrollHeight;
+        years.value = [...filteredYears, ...years.value];
+        vue.nextTick(() => {
+          if (!scrollRef)
+            return;
+          const heightDifference = scrollRef.scrollHeight - originalScrollHeight;
+          scrollRef.scrollTop = scrollTop + heightDifference;
+        });
+      }
+    };
+    const handlerBottom = () => {
+      const maxYear = Number(props.maxYear || 2200);
+      if (Number(years.value[years.value.length - 1]) >= maxYear) {
+        return;
+      }
+      const newYears = setYearData(years.value[years.value.length - 1] + 1);
+      const filteredYears = newYears.filter((year2) => year2 <= maxYear);
+      if (filteredYears.length > 0) {
+        years.value = [...years.value, ...filteredYears];
       }
     };
     const getValue = (arg) => {
-      return (/* @__PURE__ */ new Date(
-        `${arg.year || year.value}/${arg.month || month.value}/${arg.day || day.value || "01"}`
-      )).getTime();
+      return (/* @__PURE__ */ new Date(`${arg.year || year.value}/${arg.month || month.value}/${arg.day || day.value || "01"}`)).getTime();
     };
     const getStringValue = (arg = {}) => {
       const yearVal = arg.year || year.value;
@@ -284,7 +350,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       const imonth = `${yearVal}-${addZero(monthVal)}`;
       const iday = dayVal !== null && dayVal !== void 0 ? `${addZero(dayVal)}` : "01";
       const itime = `${hourVal}:${minuteVal}:${secondVal}`;
-      if (props.type === "month") {
+      if (props.type === "month" || props.type === "months") {
         return imonth;
       } else if (props.type === "datetime" || props.type === "time") {
         return `${imonth}-${iday} ${itime}`;
@@ -316,7 +382,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
     const setData = () => {
       setCurrent();
-      setYearData();
       setDayData();
       setTimeData();
     };
@@ -337,7 +402,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         if (props.rangeType === "end") {
           year.value = year.value || (/* @__PURE__ */ new Date()).getFullYear();
           if ((end.value.day || end.value.month) && isAnyDate(getStringValue(end.value))) {
-            if (props.type === "month") {
+            if (props.type === "month" || props.type === "months") {
               if (start.value.year === end.value.year) {
                 year.value = end.value.year + 1;
               } else {
@@ -373,13 +438,38 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           }
         }
       } else {
-        if (props.modelValue && !isNaN(new Date(props.modelValue).getTime())) {
-          year.value = new Date(props.modelValue).getFullYear();
-          month.value = new Date(props.modelValue).getMonth() + 1;
-          day.value = new Date(props.modelValue).getDate();
-          hour.value = String(new Date(props.modelValue).getHours());
-          minute.value = String(new Date(props.modelValue).getMinutes());
-          second.value = String(new Date(props.modelValue).getSeconds());
+        if (props.modelValue && (!isNaN(new Date(props.modelValue).getTime()) || props.type === "months" || props.type === "dates")) {
+          if (props.type === "months" || props.type === "dates") {
+            const mValue = props.modelValue;
+            const mArray = mValue.split(",");
+            if (!mArray.length)
+              return;
+            year.value = new Date(mArray[mArray.length - 1]).getFullYear();
+            month.value = new Date(mArray[mArray.length - 1]).getMonth() + 1;
+            day.value = new Date(mArray[mArray.length - 1]).getDate();
+            hour.value = String(new Date(mArray[mArray.length - 1]).getHours());
+            minute.value = String(new Date(mArray[mArray.length - 1]).getMinutes());
+            second.value = String(new Date(mArray[mArray.length - 1]).getSeconds());
+            if (props.type === "months") {
+              monthsRangeData.value = mArray;
+              if (monthsRangeData.value.length > 0) {
+                setMonthsData();
+              }
+            }
+            if (props.type === "dates") {
+              daysRangeData.value = mArray;
+              if (daysRangeData.value.length > 0) {
+                setDaysData();
+              }
+            }
+          } else {
+            year.value = new Date(props.modelValue).getFullYear();
+            month.value = new Date(props.modelValue).getMonth() + 1;
+            day.value = new Date(props.modelValue).getDate();
+            hour.value = String(new Date(props.modelValue).getHours());
+            minute.value = String(new Date(props.modelValue).getMinutes());
+            second.value = String(new Date(props.modelValue).getSeconds());
+          }
         } else if (props.modelValue && isNaN(new Date(props.modelValue).getTime()) && !isNaN(new Date(props.modelValue.replace(/-/g, "/")).getTime())) {
           const value = props.modelValue.replace(/-/g, "/");
           year.value = new Date(value).getFullYear();
@@ -398,23 +488,35 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }
       }
     };
+    const filterYearData = (arr) => {
+      const minYear = Number(props.minYear || 1900);
+      const maxYear = Number(props.maxYear || 2200);
+      return arr.filter((year2) => year2 >= minYear && year2 <= maxYear);
+    };
     const setYearData = (yearVal) => {
-      yearVal = yearVal || year.value;
+      const minYear = Number(props.minYear || 1900);
+      const maxYear = Number(props.maxYear || 2200);
+      if (!yearVal) {
+        yearVal = year.value >= minYear && year.value <= maxYear ? year.value : minYear;
+      } else if (yearVal && (yearVal < minYear || yearVal > maxYear)) {
+        yearVal = minYear;
+      } else {
+        yearVal = yearVal || year.value;
+      }
       let arr = [];
-      for (let i = 0; i < 10; i++) {
-        arr.push(Math.floor(yearVal / 10) * 10 + i);
+      if (yearVal === year.value) {
+        for (let i = -25; i < 25; i++) {
+          arr.push(yearVal + i);
+        }
+      } else {
+        for (let i = 0; i < 50; i++) {
+          arr.push(yearVal + i);
+        }
       }
-      years.value = arr;
+      return filterYearData(arr);
     };
     const setDayData = () => {
-      let yearVal = new Date(props.modelValue).getFullYear();
-      let monthVal = new Date(props.modelValue).getMonth() + 1;
-      let dayVal = new Date(props.modelValue).getDate();
-      if (year.value === yearVal && month.value === monthVal) {
-        day.value = dayVal;
-      } else {
-        day.value = null;
-      }
+      commonSetDayVal();
       const dayCount = getMonthDays(`${year.value}/${month.value}/1`);
       const thisMonthFirstDay = /* @__PURE__ */ new Date(`${year.value}/${month.value}/1`);
       thisMonthFirstDay.setMonth(thisMonthFirstDay.getMonth(), 1);
@@ -461,12 +563,21 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         second.value = secondVal;
       }
     };
+    const toggleString = (arr, str) => {
+      const hasStr = arr.includes(str);
+      if (hasStr) {
+        return arr.filter((item) => item !== str);
+      } else {
+        return [...arr, str];
+      }
+    };
     const selectYear = (item) => {
       year.value = item;
+      isClickFlag.value = true;
     };
     const selectMonth = (item) => {
       if (item) {
-        if (props.range && props.type === "month") {
+        if (props.range && (props.type === "month" || props.type === "months")) {
           let startVal = {};
           let endVal = {};
           if (!start.value.month && !end.value.month) {
@@ -502,7 +613,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           end.value = JSON.parse(JSON.stringify(endVal));
           submitValue.value = iValue.value;
         } else {
-          if (props.type === "month") {
+          if (props.type === "month" || props.type === "months") {
             emit(
               "beforeChange",
               getStringValue({
@@ -532,11 +643,67 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }
       }
     };
+    const setMonthsData = () => {
+      yearsData.value = [
+        ...new Set(
+          monthsRangeData.value.map((item) => {
+            var _a;
+            return Number((_a = item.split("-")[0]) != null ? _a : curYear.value);
+          })
+        )
+      ];
+      monthsData.value = [
+        ...new Set(
+          monthsRangeData.value.map((item) => {
+            var _a;
+            return (_a = item.split("-")[1]) != null ? _a : addZero(curMonth.value);
+          })
+        )
+      ];
+    };
+    const setDaysData = () => {
+      yearsData.value = [
+        ...new Set(
+          daysRangeData.value.map((item) => {
+            var _a;
+            return Number((_a = item.split("-")[0]) != null ? _a : curYear.value);
+          })
+        )
+      ];
+      monthsData.value = [
+        ...new Set(
+          daysRangeData.value.map((item) => {
+            var _a;
+            return (_a = item.split("-")[1]) != null ? _a : addZero(curMonth.value);
+          })
+        )
+      ];
+      daysData.value = [
+        ...new Set(
+          daysRangeData.value.map((item) => {
+            var _a;
+            return (_a = item.split("-")[2]) != null ? _a : addZero(curDay.value);
+          })
+        )
+      ];
+      monthsRangeData.value = [
+        ...new Set(
+          daysRangeData.value.map((item) => {
+            return item.split("-").slice(0, 2).join("-");
+          })
+        )
+      ];
+    };
     const selectMonthAction = (item) => {
       month.value = item;
+      if (props.type === "month" || props.type === "months") {
+        const str = `${year.value || curYear}-${addZero(month.value)}`;
+        monthsRangeData.value = toggleString(monthsRangeData.value, str);
+        setMonthsData();
+      }
       monthLayer.value = false;
       setDayData();
-      if (props.type === "month") {
+      if (props.type === "month" || props.type === "months") {
         day.value = 1;
         submitValue.value = iValue.value;
       }
@@ -582,7 +749,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           let val = getStringValue({
             day: item.value
           });
-          if (!props.type || props.type === "date") {
+          if (!props.type || props.type === "date" || props.type === "dates") {
             emit("beforeChange", val);
             beforeChange.handleBeforeChange(
               props.beforeChange,
@@ -601,9 +768,10 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
     const selectDayAction = (item) => {
       day.value = Number(item.value);
-      if (!props.type || props.type === "date") {
-        submitValue.value = iValue.value;
-      }
+      const str = `${year.value || curYear}-${addZero(month.value)}-${addZero(day.value)}`;
+      daysRangeData.value = toggleString(daysRangeData.value, str);
+      setDaysData();
+      submitValue.value = iValue.value;
     };
     const selectTime = () => {
       if (day.value === null && !props.min && !props.max) {
@@ -611,6 +779,31 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       } else if (day.value === null && props.min && props.max) {
         return;
       }
+    };
+    const selectTimeAction = () => {
+      submitValue.value = iValue.value;
+      emit("close");
+    };
+    const selectHour = (item) => {
+      hour.value = item;
+      selectTime();
+    };
+    const selectMinute = (item) => {
+      minute.value = item;
+      selectTime();
+    };
+    const selectSecond = (item) => {
+      second.value = item;
+      selectTime();
+    };
+    const moment = () => {
+      hour.value = String((/* @__PURE__ */ new Date()).getHours());
+      minute.value = String((/* @__PURE__ */ new Date()).getMinutes());
+      second.value = String((/* @__PURE__ */ new Date()).getSeconds());
+      selectTime();
+    };
+    const confirm = () => {
+      emit("confirm", submitValue.value);
       emit("beforeChange", getStringValue());
       if (props.beforeChange) {
         const fn = props.beforeChange(getStringValue());
@@ -627,44 +820,53 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         selectTimeAction();
       }
     };
-    const selectTimeAction = () => {
-      timeLayer.value = false;
-      submitValue.value = iValue.value;
-      emit("close");
-    };
     const setYearClass = (item) => {
       return {
-        cur: curYear.value === item,
-        on: year.value === item
+        "is-cur": curYear.value === item,
+        "is-on": year.value === item,
+        "is-checked": (props.type === "months" || props.type === "dates") && yearsData.value.includes(item)
       };
     };
     const setMonthClass = (item) => {
       let arr = [];
       if (year.value === curYear.value && curMonth.value === item) {
-        arr.push("cur");
+        arr.push("is-cur");
       }
-      if (props.range && props.type === "month") {
+      if (props.range && (props.type === "month" || props.type === "months")) {
         if (year.value === start.value.year && item === start.value.month) {
           if (end.value.month) {
-            arr.push("start");
+            arr.push("is-start");
           } else {
-            arr.push("on");
+            arr.push("is-on");
           }
         }
         if (year.value === end.value.year && item === end.value.month) {
-          arr.push("end");
+          arr.push("is-end");
         }
         const value = getValue({
           year: year.value,
           month: item,
           day: 1
         });
+        console.log("start.value", start.value);
+        console.log("end.value", end.value);
+        console.log("value", value);
+        console.log("getValue(start.value)", getValue(start.value));
+        console.log("getValue(end.value)", getValue(end.value));
         if ((value > getValue(start.value) || value === getValue(start.value)) && value < getValue(end.value)) {
-          arr.push("range");
+          arr.push("is-range");
         }
       } else {
-        if (month.value === item) {
-          arr.push("on");
+        if (month.value === item && (props.type === "month" || props.type === "date" || !props.type)) {
+          arr.push("is-on");
+        }
+        if ((props.type === "months" || props.type === "dates") && yearsData.value.length > 0) {
+          if (yearsData.value.includes(year.value) && years.value.includes(year.value) && monthsRangeData.value.includes(`${year.value}-${addZero(item)}`)) {
+            arr.push("is-checked");
+            if (month.value === item) {
+              arr.push("is-on");
+            }
+          }
         }
       }
       if (item && (props.min || props.max)) {
@@ -703,24 +905,24 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const setDayClass = (item) => {
       let arr = [];
       if (item.sat) {
-        arr.push("sat");
+        arr.push("is-sat");
       }
       if (item.sun) {
-        arr.push("sun");
+        arr.push("is-sun");
       }
       if (year.value === curYear.value && month.value === curMonth.value && curDay.value === item.value) {
-        arr.push("cur");
+        arr.push("is-cur");
       }
       if (props.range) {
         if (year.value === start.value.year && month.value === start.value.month && item.value === start.value.day) {
           if (end.value.day) {
-            arr.push("start");
+            arr.push("is-start");
           } else {
-            arr.push("on");
+            arr.push("is-on");
           }
         }
         if (year.value === end.value.year && month.value === end.value.month && item.value === end.value.day) {
-          arr.push("end");
+          arr.push("is-end");
         }
         const value = getValue({
           year: year.value,
@@ -728,11 +930,18 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           day: item.value
         });
         if (value > getValue(start.value) && value < getValue(end.value)) {
-          arr.push("range");
+          arr.push("is-range");
         }
       } else {
-        if (day.value === item.value) {
-          arr.push("on");
+        if (day.value === item.value && props.type !== "dates") {
+          arr.push("is-on");
+        } else if (props.type === "dates") {
+          if (yearsData.value.includes(year.value) && monthsData.value.includes(addZero(month.value)) && daysRangeData.value.includes(`${year.value}-${addZero(month.value)}-${addZero(item.value)}`)) {
+            arr.push("is-checked");
+            if (day.value === item.value) {
+              arr.push("is-on");
+            }
+          }
         }
       }
       return arr;
@@ -755,41 +964,29 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
       setDayData();
     };
-    const lastYears = () => {
-      yearsPage.value -= 1;
-      setYearData(year.value + 10 * yearsPage.value);
-    };
-    const nextYears = () => {
-      yearsPage.value += 1;
-      setYearData(year.value + 10 * yearsPage.value);
-    };
     const nextYear = () => {
-      year.value += 1;
-      let yearVal = new Date(props.modelValue).getFullYear();
-      let monthVal = new Date(props.modelValue).getMonth() + 1;
-      let dayVal = new Date(props.modelValue).getDate();
-      if (year.value === yearVal && month.value === monthVal) {
-        day.value = dayVal;
-      } else {
-        day.value = null;
+      if (year.value >= Number(props.maxYear || 2200)) {
+        return;
       }
+      isClickFlag.value = false;
+      year.value += 1;
+      commonSetDayVal();
     };
     const lastYear = () => {
-      year.value -= 1;
-      let yearVal = new Date(props.modelValue).getFullYear();
-      let monthVal = new Date(props.modelValue).getMonth() + 1;
-      let dayVal = new Date(props.modelValue).getDate();
-      if (year.value === yearVal && month.value === monthVal) {
-        day.value = dayVal;
-      } else {
-        day.value = null;
+      if (year.value <= Number(props.minYear || 1900)) {
+        return;
       }
+      isClickFlag.value = false;
+      year.value -= 1;
+      commonSetDayVal();
     };
     const toggleMonthSelector = () => {
       if (!monthLayer.value) {
         monthLayer.value = true;
         tempYear.value = year.value;
-        setYearData(year.value);
+        years.value = setYearData(year.value);
+        isClickFlag.value = false;
+        goToCenter();
       } else {
         monthLayer.value = false;
       }
@@ -797,23 +994,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const hourScroll = vue.ref();
     const minuteScroll = vue.ref();
     const secondScroll = vue.ref();
-    const showTimeLayer = () => {
-      timeLayer.value = true;
-      vue.nextTick(() => {
-        var _a, _b, _c;
-        (_a = hourScroll.value) == null ? void 0 : _a.adjust();
-        (_b = minuteScroll.value) == null ? void 0 : _b.adjust();
-        (_c = secondScroll.value) == null ? void 0 : _c.adjust();
-      });
-    };
-    const closeTimeLayer = () => {
-      if (props.type === "time") {
-        timeLayer.value = false;
-        emit("close");
-      } else {
-        timeLayer.value = false;
-      }
-    };
     const isDate = (date) => {
       const DateExp = /^[1-2][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
       if (DateExp.test(date)) {
@@ -860,12 +1040,31 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         return String(str);
       }
     };
+    const goToCenter = () => {
+      vue.nextTick(() => {
+        var _a;
+        const scrollRef = (_a = yearScrollRef.value) == null ? void 0 : _a.$el;
+        if (!scrollRef)
+          return;
+        const currentYear = year.value;
+        const currentIndex = years.value.findIndex((year2) => year2 === currentYear);
+        const firstItem = scrollRef.querySelector(".to-calendar-year-item");
+        if (!firstItem)
+          return;
+        const itemHeight = firstItem.offsetHeight;
+        const scrollTop = currentIndex * itemHeight - scrollRef.clientHeight / 2 + itemHeight / 2;
+        scrollRef.scrollTop = Math.max(0, scrollTop);
+      });
+    };
     vue.onMounted(() => {
+      if (props.minYear && props.maxYear && Number(props.minYear) > Number(props.maxYear)) {
+        console.error("minYear \u4E0D\u80FD\u5927\u4E8E maxYear");
+      }
       setData();
-      initCalendar();
+      years.value = setYearData();
+      goToCenter();
     });
     __expose({
-      initCalendar,
       setData,
       addZero,
       year,
@@ -876,382 +1075,630 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       second
     });
     return (_ctx, _cache) => {
+      const _component_to_icon = vue.resolveComponent("to-icon");
+      const _component_to_button = vue.resolveComponent("to-button");
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(["to-calendar", {
-          "to-calendar-type-month": _ctx.type === "month",
-          "to-calendar-size-large": _ctx.size === "large"
-        }]),
+        key: vue.unref(index.langKey),
+        class: vue.normalizeClass(["to-calendar", setClass.value]),
+        flex: _ctx.flex ? _ctx.flex : null,
         style: vue.normalizeStyle(vue.unref(widthStyle))
       }, [
-        vue.createElementVNode("div", { class: "header" }, [
-          vue.createElementVNode("div", {
-            class: "prevYear",
-            onClick: lastYear
-          }),
-          vue.createElementVNode("div", {
-            class: "prev",
-            onClick: lastMonth
-          }),
-          vue.createElementVNode("div", {
-            class: vue.normalizeClass(["info", { "info-unfold": _ctx.type !== "month" }]),
-            onClick: toggleMonthSelector
+        vue.createCommentVNode(" \u5185\u5BB9 "),
+        vue.createElementVNode("div", { class: "to-calendar-content" }, [
+          vue.createCommentVNode(" \u5FEB\u6377\u65B9\u5F0F "),
+          vue.createElementVNode("div", { class: "to-calendar-shortcut" }),
+          vue.createCommentVNode(" \u65E5\u671F "),
+          _ctx.type !== "time" ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "to-calendar-date"
           }, [
-            vue.createElementVNode("span", { class: "year" }, vue.toDisplayString(year.value), 1),
-            vue.createElementVNode("span", { class: "month" }, vue.toDisplayString(addZero(month.value)), 1)
-          ], 2),
-          vue.createElementVNode("div", {
-            class: "next",
-            onClick: nextMonth
-          }),
-          vue.createElementVNode("div", {
-            class: "nextYear",
-            onClick: nextYear
-          })
-        ]),
-        vue.withDirectives(vue.createElementVNode("div", { class: "select" }, [
-          vue.createElementVNode("div", { class: "year" }, [
-            vue.createElementVNode("span", {
-              class: "prev",
-              onClick: lastYears
-            }),
-            vue.createElementVNode("ul", null, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(years.value, (item, index) => {
-                return vue.openBlock(), vue.createElementBlock("li", {
-                  key: index,
-                  class: vue.normalizeClass(setYearClass(item)),
-                  onClick: ($event) => selectYear(item)
-                }, vue.toDisplayString(item), 11, ["onClick"]);
-              }), 128))
+            vue.createCommentVNode(" \u5934\u90E8 "),
+            vue.createElementVNode("div", { class: "to-calendar-header" }, [
+              vue.createVNode(_component_to_icon, {
+                value: "backward",
+                link: "",
+                class: "to-calendar-header-prev-year",
+                onClick: vue.withModifiers(lastYear, ["stop"])
+              }),
+              vue.createVNode(_component_to_icon, {
+                value: "back",
+                link: "",
+                class: "to-calendar-header-prev",
+                onClick: vue.withModifiers(lastMonth, ["stop"])
+              }),
+              vue.createElementVNode(
+                "div",
+                {
+                  class: vue.normalizeClass(["to-calendar-header-content", { "is-unfold": _ctx.type !== "month" && _ctx.type !== "months" }]),
+                  onClick: vue.withModifiers(toggleMonthSelector, ["stop"])
+                },
+                [
+                  vue.createElementVNode(
+                    "span",
+                    { class: "to-calendar-header-year" },
+                    vue.toDisplayString(year.value) + vue.toDisplayString(vue.unref(index.t)("to.calendar.year.suffix")),
+                    1
+                    /* TEXT */
+                  ),
+                  vue.createElementVNode(
+                    "span",
+                    { class: "to-calendar-header-month" },
+                    vue.toDisplayString(addZero(month.value)) + vue.toDisplayString(vue.unref(index.t)("to.calendar.month.suffix")),
+                    1
+                    /* TEXT */
+                  )
+                ],
+                2
+                /* CLASS */
+              ),
+              vue.createVNode(_component_to_icon, {
+                value: "next",
+                link: "",
+                class: "to-calendar-header-next",
+                onClick: vue.withModifiers(nextMonth, ["stop"])
+              }),
+              vue.createVNode(_component_to_icon, {
+                value: "forward",
+                link: "",
+                class: "to-calendar-header-next-year",
+                onClick: vue.withModifiers(nextYear, ["stop"])
+              })
+            ]),
+            vue.createCommentVNode(" \u5E74\u6708\u9009\u62E9 "),
+            vue.withDirectives(vue.createElementVNode(
+              "div",
+              { class: "to-calendar-picker" },
+              [
+                vue.createVNode(
+                  vue.unref(index$1.ToScroll),
+                  {
+                    ref_key: "yearScrollRef",
+                    ref: yearScrollRef,
+                    class: "to-calendar-year",
+                    onTop: handlerTop,
+                    onBottom: handlerBottom
+                  },
+                  {
+                    default: vue.withCtx(() => [
+                      (vue.openBlock(true), vue.createElementBlock(
+                        vue.Fragment,
+                        null,
+                        vue.renderList(years.value, (item, index) => {
+                          return vue.openBlock(), vue.createElementBlock("div", {
+                            key: index,
+                            class: vue.normalizeClass(["to-calendar-year-item", setYearClass(item)]),
+                            onClick: vue.withModifiers(($event) => selectYear(item), ["stop"])
+                          }, [
+                            vue.createElementVNode(
+                              "div",
+                              { class: "to-calendar-year-item-text" },
+                              vue.toDisplayString(item),
+                              1
+                              /* TEXT */
+                            )
+                          ], 10, ["onClick"]);
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  },
+                  512
+                  /* NEED_PATCH */
+                ),
+                vue.createCommentVNode(' <to-icon value="collapse" link class="to-calendar-year-prev" @click="lastYears"></to-icon> '),
+                vue.createCommentVNode(' <div class="to-calendar-year-list"> '),
+                vue.createCommentVNode(" </div> "),
+                vue.createCommentVNode(' <to-icon value="expand" link class="to-calendar-year-next" @click="nextYears"></to-icon> '),
+                vue.createElementVNode("div", { class: "to-calendar-picker-divider" }),
+                vue.createElementVNode("div", { class: "to-calendar-month" }, [
+                  vue.createElementVNode("div", { class: "to-calendar-month-list" }, [
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(["to-calendar-month-item", setMonthClass(1)]),
+                      onClick: vue.withModifiers(($event) => selectMonth(1), ["stop"])
+                    }, [
+                      vue.createElementVNode("div", { class: "to-calendar-month-item-content" }, [
+                        vue.createElementVNode(
+                          "div",
+                          { class: "to-calendar-month-item-text" },
+                          vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m1")),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ], 10, ["onClick"]),
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(["to-calendar-month-item", setMonthClass(2)]),
+                      onClick: vue.withModifiers(($event) => selectMonth(2), ["stop"])
+                    }, [
+                      vue.createElementVNode("div", { class: "to-calendar-month-item-content" }, [
+                        vue.createElementVNode(
+                          "div",
+                          { class: "to-calendar-month-item-text" },
+                          vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m2")),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ], 10, ["onClick"]),
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(["to-calendar-month-item", setMonthClass(3)]),
+                      onClick: vue.withModifiers(($event) => selectMonth(3), ["stop"])
+                    }, [
+                      vue.createElementVNode("div", { class: "to-calendar-month-item-content" }, [
+                        vue.createElementVNode(
+                          "div",
+                          { class: "to-calendar-month-item-text" },
+                          vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m3")),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ], 10, ["onClick"]),
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(["to-calendar-month-item", setMonthClass(4)]),
+                      onClick: vue.withModifiers(($event) => selectMonth(4), ["stop"])
+                    }, [
+                      vue.createElementVNode("div", { class: "to-calendar-month-item-content" }, [
+                        vue.createElementVNode(
+                          "div",
+                          { class: "to-calendar-month-item-text" },
+                          vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m4")),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ], 10, ["onClick"]),
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(["to-calendar-month-item", setMonthClass(5)]),
+                      onClick: vue.withModifiers(($event) => selectMonth(5), ["stop"])
+                    }, [
+                      vue.createElementVNode("div", { class: "to-calendar-month-item-content" }, [
+                        vue.createElementVNode(
+                          "div",
+                          { class: "to-calendar-month-item-text" },
+                          vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m5")),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ], 10, ["onClick"]),
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(["to-calendar-month-item", setMonthClass(6)]),
+                      onClick: vue.withModifiers(($event) => selectMonth(6), ["stop"])
+                    }, [
+                      vue.createElementVNode("div", { class: "to-calendar-month-item-content" }, [
+                        vue.createElementVNode(
+                          "div",
+                          { class: "to-calendar-month-item-text" },
+                          vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m6")),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ], 10, ["onClick"]),
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(["to-calendar-month-item", setMonthClass(7)]),
+                      onClick: vue.withModifiers(($event) => selectMonth(7), ["stop"])
+                    }, [
+                      vue.createElementVNode("div", { class: "to-calendar-month-item-content" }, [
+                        vue.createElementVNode(
+                          "div",
+                          { class: "to-calendar-month-item-text" },
+                          vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m7")),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ], 10, ["onClick"]),
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(["to-calendar-month-item", setMonthClass(8)]),
+                      onClick: vue.withModifiers(($event) => selectMonth(8), ["stop"])
+                    }, [
+                      vue.createElementVNode("div", { class: "to-calendar-month-item-content" }, [
+                        vue.createElementVNode(
+                          "div",
+                          { class: "to-calendar-month-item-text" },
+                          vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m8")),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ], 10, ["onClick"]),
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(["to-calendar-month-item", setMonthClass(9)]),
+                      onClick: vue.withModifiers(($event) => selectMonth(9), ["stop"])
+                    }, [
+                      vue.createElementVNode("div", { class: "to-calendar-month-item-content" }, [
+                        vue.createElementVNode(
+                          "div",
+                          { class: "to-calendar-month-item-text" },
+                          vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m9")),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ], 10, ["onClick"]),
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(["to-calendar-month-item", setMonthClass(10)]),
+                      onClick: vue.withModifiers(($event) => selectMonth(10), ["stop"])
+                    }, [
+                      vue.createElementVNode("div", { class: "to-calendar-month-item-content" }, [
+                        vue.createElementVNode(
+                          "div",
+                          { class: "to-calendar-month-item-text" },
+                          vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m10")),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ], 10, ["onClick"]),
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(["to-calendar-month-item", setMonthClass(11)]),
+                      onClick: vue.withModifiers(($event) => selectMonth(11), ["stop"])
+                    }, [
+                      vue.createElementVNode("div", { class: "to-calendar-month-item-content" }, [
+                        vue.createElementVNode(
+                          "div",
+                          { class: "to-calendar-month-item-text" },
+                          vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m11")),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ], 10, ["onClick"]),
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(["to-calendar-month-item", setMonthClass(12)]),
+                      onClick: vue.withModifiers(($event) => selectMonth(12), ["stop"])
+                    }, [
+                      vue.createElementVNode("div", { class: "to-calendar-month-item-content" }, [
+                        vue.createElementVNode(
+                          "div",
+                          { class: "to-calendar-month-item-text" },
+                          vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m12")),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ], 10, ["onClick"])
+                  ])
+                ])
+              ],
+              512
+              /* NEED_PATCH */
+            ), [
+              [vue.vShow, monthLayer.value || _ctx.type === "month" || _ctx.type === "months"]
+            ]),
+            vue.createCommentVNode(" \u5468 "),
+            _ctx.type !== "month" && _ctx.type !== "months" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock(
+              "div",
+              {
+                key: 0,
+                class: "to-calendar-week"
+              },
+              [
+                vue.createElementVNode(
+                  "div",
+                  { class: "to-calendar-week-item" },
+                  vue.toDisplayString(vue.unref(index.t)("to.calendar.week.w0")),
+                  1
+                  /* TEXT */
+                ),
+                vue.createElementVNode(
+                  "div",
+                  { class: "to-calendar-week-item" },
+                  vue.toDisplayString(vue.unref(index.t)("to.calendar.week.w1")),
+                  1
+                  /* TEXT */
+                ),
+                vue.createElementVNode(
+                  "div",
+                  { class: "to-calendar-week-item" },
+                  vue.toDisplayString(vue.unref(index.t)("to.calendar.week.w2")),
+                  1
+                  /* TEXT */
+                ),
+                vue.createElementVNode(
+                  "div",
+                  { class: "to-calendar-week-item" },
+                  vue.toDisplayString(vue.unref(index.t)("to.calendar.week.w3")),
+                  1
+                  /* TEXT */
+                ),
+                vue.createElementVNode(
+                  "div",
+                  { class: "to-calendar-week-item" },
+                  vue.toDisplayString(vue.unref(index.t)("to.calendar.week.w4")),
+                  1
+                  /* TEXT */
+                ),
+                vue.createElementVNode(
+                  "div",
+                  { class: "to-calendar-week-item" },
+                  vue.toDisplayString(vue.unref(index.t)("to.calendar.week.w5")),
+                  1
+                  /* TEXT */
+                ),
+                vue.createElementVNode(
+                  "div",
+                  { class: "to-calendar-week-item" },
+                  vue.toDisplayString(vue.unref(index.t)("to.calendar.week.w6")),
+                  1
+                  /* TEXT */
+                )
+              ],
+              512
+              /* NEED_PATCH */
+            )), [
+              [vue.vShow, !(monthLayer.value || _ctx.type === "month" || _ctx.type === "months")]
+            ]) : vue.createCommentVNode("v-if", true),
+            vue.createCommentVNode(" \u65E5 "),
+            _ctx.type !== "month" && _ctx.type !== "months" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock(
+              "div",
+              {
+                key: 1,
+                class: "to-calendar-day"
+              },
+              [
+                (vue.openBlock(true), vue.createElementBlock(
+                  vue.Fragment,
+                  null,
+                  vue.renderList(days.value, (item, index) => {
+                    return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                      key: index,
+                      class: vue.normalizeClass(["to-calendar-day-item", setDayClass(item)]),
+                      onClick: ($event) => selectDay(item)
+                    }, [
+                      vue.createElementVNode("div", { class: "to-calendar-day-item-content" }, [
+                        vue.renderSlot(_ctx.$slots, "default", {
+                          item,
+                          index
+                        }, () => [
+                          item.value ? (vue.openBlock(), vue.createElementBlock(
+                            "div",
+                            {
+                              key: 0,
+                              class: "to-calendar-day-text"
+                            },
+                            vue.toDisplayString(dayText.value(item.value)),
+                            1
+                            /* TEXT */
+                          )) : vue.createCommentVNode("v-if", true),
+                          item.point && item.point.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", {
+                            key: 1,
+                            class: "to-calendar-day-points"
+                          }, [
+                            (vue.openBlock(true), vue.createElementBlock(
+                              vue.Fragment,
+                              null,
+                              vue.renderList(item.point, (ipoint, pointIndex) => {
+                                return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$2.ToTag), {
+                                  key: pointIndex,
+                                  type: _ctx.size === "large" ? "dot" : "",
+                                  color: pointColor.value(ipoint.type)
+                                }, {
+                                  default: vue.withCtx(() => [
+                                    vue.createTextVNode(
+                                      vue.toDisplayString(ipoint.count),
+                                      1
+                                      /* TEXT */
+                                    )
+                                  ]),
+                                  _: 2
+                                  /* DYNAMIC */
+                                }, 1032, ["type", "color"])), [
+                                  [vue.unref(tip.default), ipoint.tooltip ? ipoint.tooltip : ""]
+                                ]);
+                              }),
+                              128
+                              /* KEYED_FRAGMENT */
+                            ))
+                          ])) : vue.createCommentVNode("v-if", true)
+                        ])
+                      ])
+                    ], 10, ["onClick"])), [
+                      [vue.unref(dis.default), isDisableDay.value(item)]
+                    ]);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ],
+              512
+              /* NEED_PATCH */
+            )), [
+              [vue.vShow, !(monthLayer.value || _ctx.type === "month" || _ctx.type === "months")]
+            ]) : vue.createCommentVNode("v-if", true),
+            vue.createCommentVNode(" \u56FE\u4F8B "),
+            _ctx.legend ? vue.withDirectives((vue.openBlock(), vue.createElementBlock(
+              "div",
+              {
+                key: 2,
+                class: "to-calendar-legend"
+              },
+              [
+                vue.renderSlot(_ctx.$slots, "legend", {}, () => [
+                  vue.createCommentVNode(' <to-tag type="dot" color="danger">\u903E\u671F\u672A\u5B8C\u6210</to-tag>\r\n						<to-tag type="dot" color="primary">\u6B63\u5E38\u8FDB\u884C\u4E2D</to-tag>\r\n						<to-tag type="dot" color="success">\u5DF2\u5B8C\u6210</to-tag> ')
+                ])
+              ],
+              512
+              /* NEED_PATCH */
+            )), [
+              [vue.vShow, !(monthLayer.value || _ctx.type === "month" || _ctx.type === "months")]
+            ]) : vue.createCommentVNode("v-if", true)
+          ])) : vue.createCommentVNode("v-if", true),
+          vue.createCommentVNode(" \u65F6\u95F4 "),
+          _ctx.type === "datetime" || _ctx.type === "time" ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            class: "to-calendar-time"
+          }, [
+            vue.createElementVNode("div", { class: "to-calendar-time-info" }, [
+              vue.createElementVNode(
+                "div",
+                { class: "to-calendar-time-info-text" },
+                vue.toDisplayString(addZero(hour.value)) + ":" + vue.toDisplayString(addZero(minute.value)) + ":" + vue.toDisplayString(addZero(second.value)),
+                1
+                /* TEXT */
+              )
             ]),
-            vue.createElementVNode("span", {
-              class: "next",
-              onClick: nextYears
-            })
-          ]),
-          vue.createElementVNode("div", { class: "month" }, [
-            vue.createElementVNode("ul", null, [
-              vue.createElementVNode("li", {
-                class: vue.normalizeClass(setMonthClass(1)),
-                onClick: ($event) => selectMonth(1)
-              }, vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m1")), 11, ["onClick"]),
-              vue.createElementVNode("li", {
-                class: vue.normalizeClass(setMonthClass(2)),
-                onClick: ($event) => selectMonth(2)
-              }, vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m2")), 11, ["onClick"]),
-              vue.createElementVNode("li", {
-                class: vue.normalizeClass(setMonthClass(3)),
-                onClick: ($event) => selectMonth(3)
-              }, vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m3")), 11, ["onClick"]),
-              vue.createElementVNode("li", {
-                class: vue.normalizeClass(setMonthClass(4)),
-                onClick: ($event) => selectMonth(4)
-              }, vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m4")), 11, ["onClick"]),
-              vue.createElementVNode("li", {
-                class: vue.normalizeClass(setMonthClass(5)),
-                onClick: ($event) => selectMonth(5)
-              }, vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m5")), 11, ["onClick"]),
-              vue.createElementVNode("li", {
-                class: vue.normalizeClass(setMonthClass(6)),
-                onClick: ($event) => selectMonth(6)
-              }, vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m6")), 11, ["onClick"]),
-              vue.createElementVNode("li", {
-                class: vue.normalizeClass(setMonthClass(7)),
-                onClick: ($event) => selectMonth(7)
-              }, vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m7")), 11, ["onClick"]),
-              vue.createElementVNode("li", {
-                class: vue.normalizeClass(setMonthClass(8)),
-                onClick: ($event) => selectMonth(8)
-              }, vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m8")), 11, ["onClick"]),
-              vue.createElementVNode("li", {
-                class: vue.normalizeClass(setMonthClass(9)),
-                onClick: ($event) => selectMonth(9)
-              }, vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m9")), 11, ["onClick"]),
-              vue.createElementVNode("li", {
-                class: vue.normalizeClass(setMonthClass(10)),
-                onClick: ($event) => selectMonth(10)
-              }, vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m10")), 11, ["onClick"]),
-              vue.createElementVNode("li", {
-                class: vue.normalizeClass(setMonthClass(11)),
-                onClick: ($event) => selectMonth(11)
-              }, vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m11")), 11, ["onClick"]),
-              vue.createElementVNode("li", {
-                class: vue.normalizeClass(setMonthClass(12)),
-                onClick: ($event) => selectMonth(12)
-              }, vue.toDisplayString(vue.unref(index.t)("to.calendar.month.m12")), 11, ["onClick"])
+            vue.createElementVNode("div", { class: "to-calendar-time-content" }, [
+              vue.createVNode(
+                vue.unref(index$1.ToScroll),
+                {
+                  ref_key: "hourScroll",
+                  ref: hourScroll,
+                  class: "to-calendar-time-list"
+                },
+                {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(true), vue.createElementBlock(
+                      vue.Fragment,
+                      null,
+                      vue.renderList(hours.value, (item) => {
+                        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                          key: item,
+                          class: vue.normalizeClass([{ "is-on": hour.value === item }, "to-calendar-time-item"]),
+                          onClick: ($event) => selectHour(item)
+                        }, [
+                          vue.createElementVNode(
+                            "div",
+                            { class: "to-calendar-time-item-text" },
+                            vue.toDisplayString(addZero(item)),
+                            1
+                            /* TEXT */
+                          )
+                        ], 10, ["onClick"])), [
+                          [vue.unref(dis.default), isDisableHour.value(item)]
+                        ]);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]),
+                  _: 1
+                  /* STABLE */
+                },
+                512
+                /* NEED_PATCH */
+              ),
+              vue.createVNode(
+                vue.unref(index$1.ToScroll),
+                {
+                  ref_key: "minuteScroll",
+                  ref: minuteScroll,
+                  class: "to-calendar-time-list"
+                },
+                {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(true), vue.createElementBlock(
+                      vue.Fragment,
+                      null,
+                      vue.renderList(minutes.value, (item) => {
+                        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                          key: item,
+                          class: vue.normalizeClass([{ "is-on": minute.value === item }, "to-calendar-time-item"]),
+                          onClick: ($event) => selectMinute(item)
+                        }, [
+                          vue.createElementVNode(
+                            "div",
+                            { class: "to-calendar-time-item-text" },
+                            vue.toDisplayString(addZero(item)),
+                            1
+                            /* TEXT */
+                          )
+                        ], 10, ["onClick"])), [
+                          [vue.unref(dis.default), isDisableMinute.value(item)]
+                        ]);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]),
+                  _: 1
+                  /* STABLE */
+                },
+                512
+                /* NEED_PATCH */
+              ),
+              vue.createVNode(
+                vue.unref(index$1.ToScroll),
+                {
+                  ref_key: "secondScroll",
+                  ref: secondScroll,
+                  class: "to-calendar-time-list"
+                },
+                {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(true), vue.createElementBlock(
+                      vue.Fragment,
+                      null,
+                      vue.renderList(seconds.value, (item) => {
+                        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                          key: item,
+                          class: vue.normalizeClass([{ "is-on": second.value === item }, "to-calendar-time-item"]),
+                          onClick: ($event) => selectSecond(item)
+                        }, [
+                          vue.createElementVNode(
+                            "div",
+                            { class: "to-calendar-time-item-text" },
+                            vue.toDisplayString(addZero(item)),
+                            1
+                            /* TEXT */
+                          )
+                        ], 10, ["onClick"])), [
+                          [vue.unref(dis.default), isDisableSecond.value(item)]
+                        ]);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]),
+                  _: 1
+                  /* STABLE */
+                },
+                512
+                /* NEED_PATCH */
+              )
             ])
-          ])
-        ], 512), [
-          [vue.vShow, monthLayer.value || _ctx.type === "month"]
+          ])) : vue.createCommentVNode("v-if", true)
         ]),
-        _ctx.type !== "month" ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          class: "week"
-        }, [
-          vue.createElementVNode("ul", null, [
-            vue.createElementVNode("li", null, vue.toDisplayString(vue.unref(index.t)("to.calendar.week.w0")), 1),
-            vue.createElementVNode("li", null, vue.toDisplayString(vue.unref(index.t)("to.calendar.week.w1")), 1),
-            vue.createElementVNode("li", null, vue.toDisplayString(vue.unref(index.t)("to.calendar.week.w2")), 1),
-            vue.createElementVNode("li", null, vue.toDisplayString(vue.unref(index.t)("to.calendar.week.w3")), 1),
-            vue.createElementVNode("li", null, vue.toDisplayString(vue.unref(index.t)("to.calendar.week.w4")), 1),
-            vue.createElementVNode("li", null, vue.toDisplayString(vue.unref(index.t)("to.calendar.week.w5")), 1),
-            vue.createElementVNode("li", null, vue.toDisplayString(vue.unref(index.t)("to.calendar.week.w6")), 1)
-          ])
-        ])) : vue.createCommentVNode("", true),
-        _ctx.type !== "month" ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 1,
-          class: "day"
-        }, [
-          vue.createElementVNode("ul", null, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(days.value, (item, index) => {
-              return vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
-                key: index,
-                class: vue.normalizeClass(setDayClass(item)),
-                onClick: ($event) => selectDay(item)
-              }, [
-                vue.renderSlot(_ctx.$slots, "default", {
-                  item,
-                  index
-                }, () => [
-                  item.value ? (vue.openBlock(), vue.createElementBlock("span", {
-                    key: 0,
-                    class: "solar"
-                  }, vue.toDisplayString(dayText.value(item.value)), 1)) : vue.createCommentVNode("", true),
-                  item.point && item.point.length > 0 ? (vue.openBlock(), vue.createElementBlock("span", {
-                    key: 1,
-                    class: "to-calendar-points"
-                  }, [
-                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item.point, (ipoint, pointIndex) => {
-                      return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$1.ToTag), {
-                        key: pointIndex,
-                        type: _ctx.size === "large" ? "dot" : "",
-                        color: pointColor.value(ipoint.type),
-                        fillet: _ctx.size === "large" ? "" : "round"
-                      }, {
-                        default: vue.withCtx(() => [
-                          vue.createTextVNode(vue.toDisplayString(ipoint.count), 1)
-                        ]),
-                        _: 2
-                      }, 1032, ["type", "color", "fillet"])), [
-                        [vue.unref(tip.default), ipoint.tooltip ? ipoint.tooltip : ""]
-                      ]);
-                    }), 128))
-                  ])) : vue.createCommentVNode("", true)
-                ])
-              ], 10, ["onClick"])), [
-                [vue.unref(dis.default), isDisableDay.value(item)]
-              ]);
-            }), 128))
-          ])
-        ])) : vue.createCommentVNode("", true),
-        _ctx.legend ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 2,
-          class: "to-calendar-legend"
-        }, [
-          vue.renderSlot(_ctx.$slots, "legend")
-        ])) : vue.createCommentVNode("", true),
+        vue.createCommentVNode(" \u64CD\u4F5C "),
         _ctx.type === "datetime" || _ctx.type === "time" ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 3,
-          class: "time"
+          key: 0,
+          class: "to-calendar-fn"
         }, [
-          vue.createElementVNode("div", { class: "input to-calendar-time-input" }, [
-            vue.createVNode(vue.unref(index$2.ToInput), {
-              modelValue: hour.value,
-              "onUpdate:modelValue": ($event) => hour.value = $event,
-              type: "number",
-              mode: "none",
-              placeholder: vue.unref(index.t)("to.calendar.time.hPlaceholder"),
-              width: "full",
-              maxlength: 2,
-              max: maxHour.value,
-              min: 0,
-              onClick: showTimeLayer
-            }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder", "max"])
-          ]),
-          vue.createElementVNode("span", { class: "text" }, ":"),
-          vue.createElementVNode("span", { class: "input to-calendar-time-input" }, [
-            vue.createVNode(vue.unref(index$2.ToInput), {
-              modelValue: minute.value,
-              "onUpdate:modelValue": ($event) => minute.value = $event,
-              type: "number",
-              mode: "none",
-              placeholder: vue.unref(index.t)("to.calendar.time.mPlaceholder"),
-              width: "full",
-              maxlength: 2,
-              max: new Date(_ctx.max).getMinutes(),
-              min: 0,
-              onClick: showTimeLayer
-            }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder", "max"])
-          ]),
-          vue.createElementVNode("span", { class: "text" }, ":"),
-          vue.createElementVNode("span", { class: "input to-calendar-time-input" }, [
-            vue.createVNode(vue.unref(index$2.ToInput), {
-              modelValue: second.value,
-              "onUpdate:modelValue": ($event) => second.value = $event,
-              type: "number",
-              mode: "none",
-              placeholder: vue.unref(index.t)("to.calendar.time.sPlaceholder"),
-              width: "full",
-              maxlength: 2,
-              max: new Date(_ctx.max).getSeconds(),
-              min: 0,
-              onClick: showTimeLayer
-            }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder", "max"])
-          ]),
-          vue.createVNode(vue.unref(index$3.ToButton), {
-            color: "primary",
-            onClick: selectTime
+          vue.createVNode(_component_to_button, {
+            class: "to-calendar-fn-now",
+            onClick: moment
           }, {
             default: vue.withCtx(() => [
-              vue.createTextVNode(vue.toDisplayString(vue.unref(index.t)("to.common.confirm")), 1)
+              vue.createTextVNode(
+                vue.toDisplayString(vue.unref(index.t)("to.common.now")),
+                1
+                /* TEXT */
+              )
             ]),
             _: 1
+            /* STABLE */
           }),
-          vue.withDirectives(vue.createElementVNode("div", { class: "option" }, [
-            vue.createVNode(vue.unref(index$4.ToHeader), {
-              title: vue.unref(index.t)("to.calendar.time.title"),
-              color: "primary",
-              mode: "fill"
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(index$3.ToButton), {
-                  mode: "none",
-                  color: "bg",
-                  icon: "close",
-                  onClick: closeTimeLayer
-                })
-              ]),
-              _: 1
-            }, 8, ["title"]),
-            vue.createElementVNode("div", { class: "content" }, [
-              vue.createVNode(vue.unref(index$5.ToScroll), {
-                ref_key: "hourScroll",
-                ref: hourScroll,
-                vitrual: false,
-                "bar-display": "hover"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(index$6.ToPadding), { value: 0.5 }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(index$7.ToGrid), { col: 2 }, {
-                        default: vue.withCtx(() => [
-                          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(hours.value, (item) => {
-                            return vue.openBlock(), vue.createBlock(vue.unref(index$7.ToGridItem), { key: item }, {
-                              default: vue.withCtx(() => [
-                                vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$8.ToCard), {
-                                  fillet: "normal",
-                                  color: hour.value === item ? "warning" : "default",
-                                  mode: hour.value === item ? "fill" : "none",
-                                  link: "",
-                                  onClick: ($event) => hour.value = item
-                                }, {
-                                  default: vue.withCtx(() => [
-                                    vue.createTextVNode(vue.toDisplayString(item), 1)
-                                  ]),
-                                  _: 2
-                                }, 1032, ["color", "mode", "onClick"])), [
-                                  [vue.unref(dis.default), isDisableHour.value(item)]
-                                ])
-                              ]),
-                              _: 2
-                            }, 1024);
-                          }), 128))
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }, 512),
-              vue.createVNode(vue.unref(index$5.ToScroll), {
-                ref_key: "minuteScroll",
-                ref: minuteScroll,
-                vitrual: false,
-                "bar-display": "hover"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(index$6.ToPadding), { value: 0.5 }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(index$7.ToGrid), { col: 2 }, {
-                        default: vue.withCtx(() => [
-                          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(minutes.value, (item) => {
-                            return vue.openBlock(), vue.createBlock(vue.unref(index$7.ToGridItem), { key: item }, {
-                              default: vue.withCtx(() => [
-                                vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$8.ToCard), {
-                                  fillet: "normal",
-                                  color: minute.value === item ? "warning" : "default",
-                                  mode: minute.value === item ? "fill" : "none",
-                                  link: "",
-                                  onClick: ($event) => minute.value = item
-                                }, {
-                                  default: vue.withCtx(() => [
-                                    vue.createTextVNode(vue.toDisplayString(item), 1)
-                                  ]),
-                                  _: 2
-                                }, 1032, ["color", "mode", "onClick"])), [
-                                  [vue.unref(dis.default), isDisableMinute.value(item)]
-                                ])
-                              ]),
-                              _: 2
-                            }, 1024);
-                          }), 128))
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }, 512),
-              vue.createVNode(vue.unref(index$5.ToScroll), {
-                ref_key: "secondScroll",
-                ref: secondScroll,
-                vitrual: false,
-                "bar-display": "hover"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(index$6.ToPadding), { value: 0.5 }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(index$7.ToGrid), { col: 2 }, {
-                        default: vue.withCtx(() => [
-                          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(seconds.value, (item) => {
-                            return vue.openBlock(), vue.createBlock(vue.unref(index$7.ToGridItem), { key: item }, {
-                              default: vue.withCtx(() => [
-                                vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$8.ToCard), {
-                                  fillet: "normal",
-                                  color: second.value === item ? "warning" : "default",
-                                  mode: second.value === item ? "fill" : "none",
-                                  link: "",
-                                  onClick: ($event) => second.value = item
-                                }, {
-                                  default: vue.withCtx(() => [
-                                    vue.createTextVNode(vue.toDisplayString(item), 1)
-                                  ]),
-                                  _: 2
-                                }, 1032, ["color", "mode", "onClick"])), [
-                                  [vue.unref(dis.default), isDisableSecond.value(item)]
-                                ])
-                              ]),
-                              _: 2
-                            }, 1024);
-                          }), 128))
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }, 512)
-            ])
-          ], 512), [
-            [vue.vShow, timeLayer.value]
-          ])
-        ])) : vue.createCommentVNode("", true)
-      ], 6);
+          vue.createVNode(_component_to_button, {
+            class: "to-calendar-fn-confirm",
+            onClick: confirm
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(
+                vue.toDisplayString(vue.unref(index.t)("to.common.confirm")),
+                1
+                /* TEXT */
+              )
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ])) : vue.createCommentVNode("v-if", true)
+      ], 14, ["flex"]);
     };
   }
 });