@touchvue/ui 1.0.0-beta.6 → 1.0.0-beta.60

package/es/packages/components/calendar/src/calendar.vue2.mjs

@@ -1,12 +1,6 @@
-import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, normalizeClass, normalizeStyle, unref, createElementVNode, toDisplayString, withDirectives, Fragment, renderList, vShow, createCommentVNode, renderSlot, createBlock, withCtx, createTextVNode, createVNode, nextTick } from 'vue';
-import { t } from '../../../locale/index.mjs';
+import { defineComponent, ref, computed, watch, nextTick, onMounted, resolveComponent, openBlock, createElementBlock, unref, normalizeClass, normalizeStyle, createCommentVNode, createElementVNode, createVNode, withModifiers, toDisplayString, withDirectives, withCtx, Fragment, renderList, vShow, renderSlot, createBlock, createTextVNode } from 'vue';
+import { t, langKey } from '../../../locale/index.mjs';
 import { calendarProps } from './calendar.mjs';
-import { ToButton } from '../../button/index.mjs';
-import { ToGrid, ToGridItem } from '../../grid/index.mjs';
-import { ToHeader } from '../../header/index.mjs';
-import { ToInput } from '../../input/index.mjs';
-import { ToPadding } from '../../padding/index.mjs';
-import { ToCard } from '../../card/index.mjs';
 import { ToTag } from '../../tag/index.mjs';
 import { ToScroll } from '../../scroll/index.mjs';
 import vDis from '../../../directives/dis/src/dis.mjs';
@@ -14,6 +8,7 @@ import tipDirective from '../../../directives/tip/src/tip.mjs';
 import { useWidthStyle } from '../../../hooks/useWidthStyle.mjs';
 import { isPromise } from '../../../utils/types.mjs';
 import { handleBeforeChange } from '../../../utils/beforeChange.mjs';
+import { getModeClasses } from '../../../hooks/useSetClass.mjs';
 
 const __default__ = defineComponent({
   name: "ToCalendar"
@@ -21,7 +16,7 @@ const __default__ = defineComponent({
 var _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: 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;
@@ -36,15 +31,20 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const hour = ref("0");
     const minute = ref("0");
     const second = ref("0");
+    const yearsData = ref([]);
+    const monthsData = ref([]);
+    const monthsRangeData = ref([]);
+    const daysData = ref([]);
+    const daysRangeData = ref([]);
     const years = ref([]);
     const days = ref([]);
     const hours = ref([]);
     const minutes = ref([]);
     const seconds = ref([]);
     const monthLayer = ref(false);
-    const timeLayer = ref(false);
     const tempYear = ref(0);
-    const yearsPage = ref(0);
+    const yearScrollRef = ref(null);
+    const isClickFlag = ref(false);
     const start = ref({
       year: 0,
       month: 0,
@@ -56,6 +56,19 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       day: 0
     });
     const { widthStyle } = useWidthStyle(props.width);
+    const setClass = computed(() => {
+      let arr = [];
+      if (props.type) {
+        arr.push(`type-${props.type}`);
+      }
+      if (props.size === "large") {
+        arr.push("size-large");
+      }
+      if (props.mode) {
+        arr.push(...getModeClasses(props.mode));
+      }
+      return arr;
+    });
     const dayText = computed(() => {
       return (val) => {
         const dayStr = year.value + "-" + addZero(month.value) + "-" + addZero(val);
@@ -108,19 +121,14 @@ var _sfc_main = /* @__PURE__ */ 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 === "month" && props.multiple) {
+        return monthsRangeData.value.join(",");
+      } else if (props.type === "date" && props.multiple) {
+        return daysRangeData.value.join(",");
       } else {
         return getStringValue();
       }
     });
-    const maxHour = computed(() => {
-      let max;
-      if (typeof props.max === "string") {
-        max = props.max.replace(/-/gi, "/");
-      } else {
-        max = props.max;
-      }
-      return new Date(max).getHours();
-    });
     const isDisableDay = computed(() => {
       return (item) => {
         if (year.value && month.value && item.value) {
@@ -227,11 +235,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     watch(
       () => props.modelValue,
       (val) => {
-        setData();
+        if (!(props.type === "date" && props.multiple)) {
+          setData();
+        }
         if (changeFrom.value === "out") {
           submitValue.value = val;
         }
-      }
+      },
+      { deep: true }
     );
     watch(submitValue, (val) => {
       emit("change", val);
@@ -258,17 +269,76 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       },
       { deep: true }
     );
-    const initCalendar = () => {
-      if (props.type === "time") {
-        showTimeLayer();
+    watch(
+      () => year.value,
+      () => {
+        if (!isClickFlag.value) {
+          goToCenter();
+        }
+      },
+      { deep: true }
+    );
+    const commonSetDayVal = () => {
+      if (props.type === "date" && props.multiple) {
+        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];
+        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;
@@ -312,7 +382,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const setData = () => {
       setCurrent();
-      setYearData();
       setDayData();
       setTimeData();
     };
@@ -341,6 +410,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               }
               month.value = 1;
             } else {
+              year.value = end.value.year;
               if (start.value.month === end.value.month) {
                 if (Number(month.value) === 12) {
                   year.value = end.value.year + 1;
@@ -369,13 +439,38 @@ var _sfc_main = /* @__PURE__ */ 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 === "month" && props.multiple || props.type === "date" && props.multiple)) {
+          if (props.type === "month" && props.multiple || props.type === "date" && props.multiple) {
+            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 === "month" && props.multiple) {
+              monthsRangeData.value = mArray;
+              if (monthsRangeData.value.length > 0) {
+                setMonthsData();
+              }
+            }
+            if (props.type === "date" && props.multiple) {
+              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();
@@ -394,23 +489,35 @@ var _sfc_main = /* @__PURE__ */ 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);
@@ -429,9 +536,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           if ((i + emptyLength) % 7 === 0) {
             obj.sat = true;
           }
-          const point = props.point.filter((item) => {
+          const point = Array.isArray(props.point) ? props.point.filter((item) => {
             return item.day === `${year.value}-${addZero(month.value)}-${addZero(i)}`;
-          });
+          }) : [];
           obj.point = point;
           arr.push(obj);
         }
@@ -457,8 +564,17 @@ var _sfc_main = /* @__PURE__ */ 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) {
@@ -528,8 +644,64 @@ var _sfc_main = /* @__PURE__ */ 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") {
+        const str = `${year.value || curYear}-${addZero(month.value)}`;
+        monthsRangeData.value = toggleString(monthsRangeData.value, str);
+        setMonthsData();
+      }
       monthLayer.value = false;
       setDayData();
       if (props.type === "month") {
@@ -578,7 +750,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           let val = getStringValue({
             day: item.value
           });
-          if (!props.type || props.type === "date") {
+          if (!props.type || props.type === "date" || props.type === "date" && props.multiple) {
             emit("beforeChange", val);
             handleBeforeChange(
               props.beforeChange,
@@ -597,7 +769,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const selectDayAction = (item) => {
       day.value = Number(item.value);
-      if (!props.type || props.type === "date") {
+      const str = `${year.value || curYear}-${addZero(month.value)}-${addZero(day.value)}`;
+      daysRangeData.value = toggleString(daysRangeData.value, str);
+      setDaysData();
+      if (props.type !== "datetime") {
         submitValue.value = iValue.value;
       }
     };
@@ -607,6 +782,31 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       } else if (day.value === null && props.min && props.max) {
         return;
       }
+    };
+    const selectTimeAction = () => {
+      submitValue.value = getStringValue();
+      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());
@@ -623,44 +823,49 @@ var _sfc_main = /* @__PURE__ */ 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 || (props.type === "month" && props.multiple || props.type === "date" && props.multiple) && 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 (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 === "month" && props.multiple || props.type === "date" && props.multiple) && 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-on");
+          }
         }
       }
       if (item && (props.min || props.max)) {
@@ -699,24 +904,24 @@ var _sfc_main = /* @__PURE__ */ 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,
@@ -724,11 +929,15 @@ var _sfc_main = /* @__PURE__ */ 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 === "date" && props.multiple)) {
+          arr.push("is-on");
+        } else if (props.type === "date" && props.multiple) {
+          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-on");
+          }
         }
       }
       return arr;
@@ -751,41 +960,29 @@ var _sfc_main = /* @__PURE__ */ 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;
       }
@@ -793,23 +990,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const hourScroll = ref();
     const minuteScroll = ref();
     const secondScroll = ref();
-    const showTimeLayer = () => {
-      timeLayer.value = true;
-      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)) {
@@ -856,12 +1036,31 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         return String(str);
       }
     };
+    const goToCenter = () => {
+      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);
+      });
+    };
     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,
@@ -872,382 +1071,623 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       second
     });
     return (_ctx, _cache) => {
+      const _component_to_icon = resolveComponent("to-icon");
+      const _component_to_button = resolveComponent("to-button");
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["to-calendar", {
-          "to-calendar-type-month": _ctx.type === "month",
-          "to-calendar-size-large": _ctx.size === "large"
-        }]),
+        key: unref(langKey),
+        class: normalizeClass(["to-calendar", setClass.value]),
+        flex: _ctx.flex ? _ctx.flex : null,
         style: normalizeStyle(unref(widthStyle))
       }, [
-        createElementVNode("div", { class: "header" }, [
-          createElementVNode("div", {
-            class: "prevYear",
-            onClick: lastYear
-          }),
-          createElementVNode("div", {
-            class: "prev",
-            onClick: lastMonth
-          }),
-          createElementVNode("div", {
-            class: normalizeClass(["info", { "info-unfold": _ctx.type !== "month" }]),
-            onClick: toggleMonthSelector
+        createCommentVNode(" \u5185\u5BB9 "),
+        createElementVNode("div", { class: "to-calendar-content" }, [
+          createCommentVNode(" \u5FEB\u6377\u65B9\u5F0F "),
+          createElementVNode("div", { class: "to-calendar-shortcut" }),
+          createCommentVNode(" \u65E5\u671F "),
+          _ctx.type !== "time" ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "to-calendar-date"
           }, [
-            createElementVNode("span", { class: "year" }, toDisplayString(year.value), 1),
-            createElementVNode("span", { class: "month" }, toDisplayString(addZero(month.value)), 1)
-          ], 2),
-          createElementVNode("div", {
-            class: "next",
-            onClick: nextMonth
-          }),
-          createElementVNode("div", {
-            class: "nextYear",
-            onClick: nextYear
-          })
-        ]),
-        withDirectives(createElementVNode("div", { class: "select" }, [
-          createElementVNode("div", { class: "year" }, [
-            createElementVNode("span", {
-              class: "prev",
-              onClick: lastYears
-            }),
-            createElementVNode("ul", null, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(years.value, (item, index) => {
-                return openBlock(), createElementBlock("li", {
-                  key: index,
-                  class: normalizeClass(setYearClass(item)),
-                  onClick: ($event) => selectYear(item)
-                }, toDisplayString(item), 11, ["onClick"]);
-              }), 128))
+            createCommentVNode(" \u5934\u90E8 "),
+            createElementVNode("div", { class: "to-calendar-header" }, [
+              createVNode(_component_to_icon, {
+                value: "backward",
+                link: "",
+                role: "button",
+                class: "to-calendar-header-prev-year",
+                onClick: withModifiers(lastYear, ["stop"])
+              }),
+              createVNode(_component_to_icon, {
+                value: "back",
+                link: "",
+                role: "button",
+                class: "to-calendar-header-prev",
+                onClick: withModifiers(lastMonth, ["stop"])
+              }),
+              createElementVNode(
+                "div",
+                {
+                  class: normalizeClass(["to-calendar-header-content", { "is-unfold": _ctx.type !== "month" }]),
+                  role: "button",
+                  onClick: withModifiers(toggleMonthSelector, ["stop"])
+                },
+                [
+                  createElementVNode(
+                    "span",
+                    { class: "to-calendar-header-year" },
+                    toDisplayString(year.value) + toDisplayString(unref(t)("to.calendar.year.suffix")),
+                    1
+                    /* TEXT */
+                  ),
+                  createElementVNode(
+                    "span",
+                    { class: "to-calendar-header-month" },
+                    toDisplayString(addZero(month.value)) + toDisplayString(unref(t)("to.calendar.month.suffix")),
+                    1
+                    /* TEXT */
+                  )
+                ],
+                2
+                /* CLASS */
+              ),
+              createVNode(_component_to_icon, {
+                value: "next",
+                link: "",
+                role: "button",
+                class: "to-calendar-header-next",
+                onClick: withModifiers(nextMonth, ["stop"])
+              }),
+              createVNode(_component_to_icon, {
+                value: "forward",
+                link: "",
+                role: "button",
+                class: "to-calendar-header-next-year",
+                onClick: withModifiers(nextYear, ["stop"])
+              })
             ]),
-            createElementVNode("span", {
-              class: "next",
-              onClick: nextYears
-            })
-          ]),
-          createElementVNode("div", { class: "month" }, [
-            createElementVNode("ul", null, [
-              createElementVNode("li", {
-                class: normalizeClass(setMonthClass(1)),
-                onClick: ($event) => selectMonth(1)
-              }, toDisplayString(unref(t)("to.calendar.month.m1")), 11, ["onClick"]),
-              createElementVNode("li", {
-                class: normalizeClass(setMonthClass(2)),
-                onClick: ($event) => selectMonth(2)
-              }, toDisplayString(unref(t)("to.calendar.month.m2")), 11, ["onClick"]),
-              createElementVNode("li", {
-                class: normalizeClass(setMonthClass(3)),
-                onClick: ($event) => selectMonth(3)
-              }, toDisplayString(unref(t)("to.calendar.month.m3")), 11, ["onClick"]),
-              createElementVNode("li", {
-                class: normalizeClass(setMonthClass(4)),
-                onClick: ($event) => selectMonth(4)
-              }, toDisplayString(unref(t)("to.calendar.month.m4")), 11, ["onClick"]),
-              createElementVNode("li", {
-                class: normalizeClass(setMonthClass(5)),
-                onClick: ($event) => selectMonth(5)
-              }, toDisplayString(unref(t)("to.calendar.month.m5")), 11, ["onClick"]),
-              createElementVNode("li", {
-                class: normalizeClass(setMonthClass(6)),
-                onClick: ($event) => selectMonth(6)
-              }, toDisplayString(unref(t)("to.calendar.month.m6")), 11, ["onClick"]),
-              createElementVNode("li", {
-                class: normalizeClass(setMonthClass(7)),
-                onClick: ($event) => selectMonth(7)
-              }, toDisplayString(unref(t)("to.calendar.month.m7")), 11, ["onClick"]),
-              createElementVNode("li", {
-                class: normalizeClass(setMonthClass(8)),
-                onClick: ($event) => selectMonth(8)
-              }, toDisplayString(unref(t)("to.calendar.month.m8")), 11, ["onClick"]),
-              createElementVNode("li", {
-                class: normalizeClass(setMonthClass(9)),
-                onClick: ($event) => selectMonth(9)
-              }, toDisplayString(unref(t)("to.calendar.month.m9")), 11, ["onClick"]),
-              createElementVNode("li", {
-                class: normalizeClass(setMonthClass(10)),
-                onClick: ($event) => selectMonth(10)
-              }, toDisplayString(unref(t)("to.calendar.month.m10")), 11, ["onClick"]),
-              createElementVNode("li", {
-                class: normalizeClass(setMonthClass(11)),
-                onClick: ($event) => selectMonth(11)
-              }, toDisplayString(unref(t)("to.calendar.month.m11")), 11, ["onClick"]),
-              createElementVNode("li", {
-                class: normalizeClass(setMonthClass(12)),
-                onClick: ($event) => selectMonth(12)
-              }, toDisplayString(unref(t)("to.calendar.month.m12")), 11, ["onClick"])
-            ])
-          ])
-        ], 512), [
-          [vShow, monthLayer.value || _ctx.type === "month"]
-        ]),
-        _ctx.type !== "month" ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: "week"
-        }, [
-          createElementVNode("ul", null, [
-            createElementVNode("li", null, toDisplayString(unref(t)("to.calendar.week.w0")), 1),
-            createElementVNode("li", null, toDisplayString(unref(t)("to.calendar.week.w1")), 1),
-            createElementVNode("li", null, toDisplayString(unref(t)("to.calendar.week.w2")), 1),
-            createElementVNode("li", null, toDisplayString(unref(t)("to.calendar.week.w3")), 1),
-            createElementVNode("li", null, toDisplayString(unref(t)("to.calendar.week.w4")), 1),
-            createElementVNode("li", null, toDisplayString(unref(t)("to.calendar.week.w5")), 1),
-            createElementVNode("li", null, toDisplayString(unref(t)("to.calendar.week.w6")), 1)
-          ])
-        ])) : createCommentVNode("", true),
-        _ctx.type !== "month" ? (openBlock(), createElementBlock("div", {
-          key: 1,
-          class: "day"
-        }, [
-          createElementVNode("ul", null, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(days.value, (item, index) => {
-              return withDirectives((openBlock(), createElementBlock("li", {
-                key: index,
-                class: normalizeClass(setDayClass(item)),
-                onClick: ($event) => selectDay(item)
-              }, [
-                renderSlot(_ctx.$slots, "default", {
-                  item,
-                  index
-                }, () => [
-                  item.value ? (openBlock(), createElementBlock("span", {
-                    key: 0,
-                    class: "solar"
-                  }, toDisplayString(dayText.value(item.value)), 1)) : createCommentVNode("", true),
-                  item.point && item.point.length > 0 ? (openBlock(), createElementBlock("span", {
-                    key: 1,
-                    class: "to-calendar-points"
+            createCommentVNode(" \u5E74\u6708\u9009\u62E9 "),
+            withDirectives(createElementVNode(
+              "div",
+              { class: "to-calendar-ym" },
+              [
+                createVNode(
+                  unref(ToScroll),
+                  {
+                    ref_key: "yearScrollRef",
+                    ref: yearScrollRef,
+                    class: "to-calendar-year",
+                    onTop: handlerTop,
+                    onBottom: handlerBottom
+                  },
+                  {
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(
+                        Fragment,
+                        null,
+                        renderList(years.value, (item, index) => {
+                          return openBlock(), createElementBlock("div", {
+                            key: index,
+                            class: normalizeClass(["to-calendar-year-item", setYearClass(item)]),
+                            role: "button",
+                            onClick: withModifiers(($event) => selectYear(item), ["stop"])
+                          }, [
+                            createElementVNode(
+                              "div",
+                              { class: "to-calendar-year-item-text" },
+                              toDisplayString(item),
+                              1
+                              /* TEXT */
+                            )
+                          ], 10, ["onClick"]);
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  },
+                  512
+                  /* NEED_PATCH */
+                ),
+                createCommentVNode(' <to-icon value="collapse" link class="to-calendar-year-prev" @click="lastYears"></to-icon> '),
+                createCommentVNode(' <div class="to-calendar-year-list"> '),
+                createCommentVNode(" </div> "),
+                createCommentVNode(' <to-icon value="expand" link class="to-calendar-year-next" @click="nextYears"></to-icon> '),
+                createElementVNode("div", { class: "to-calendar-month" }, [
+                  createElementVNode("div", {
+                    class: normalizeClass(["to-calendar-month-item", setMonthClass(1)]),
+                    role: "button",
+                    onClick: withModifiers(($event) => selectMonth(1), ["stop"])
+                  }, [
+                    createElementVNode(
+                      "div",
+                      { class: "to-calendar-month-item-text" },
+                      toDisplayString(unref(t)("to.calendar.month.m1")),
+                      1
+                      /* TEXT */
+                    )
+                  ], 10, ["onClick"]),
+                  createElementVNode("div", {
+                    class: normalizeClass(["to-calendar-month-item", setMonthClass(2)]),
+                    role: "button",
+                    onClick: withModifiers(($event) => selectMonth(2), ["stop"])
+                  }, [
+                    createElementVNode(
+                      "div",
+                      { class: "to-calendar-month-item-text" },
+                      toDisplayString(unref(t)("to.calendar.month.m2")),
+                      1
+                      /* TEXT */
+                    )
+                  ], 10, ["onClick"]),
+                  createElementVNode("div", {
+                    class: normalizeClass(["to-calendar-month-item", setMonthClass(3)]),
+                    role: "button",
+                    onClick: withModifiers(($event) => selectMonth(3), ["stop"])
+                  }, [
+                    createElementVNode(
+                      "div",
+                      { class: "to-calendar-month-item-text" },
+                      toDisplayString(unref(t)("to.calendar.month.m3")),
+                      1
+                      /* TEXT */
+                    )
+                  ], 10, ["onClick"]),
+                  createElementVNode("div", {
+                    class: normalizeClass(["to-calendar-month-item", setMonthClass(4)]),
+                    role: "button",
+                    onClick: withModifiers(($event) => selectMonth(4), ["stop"])
+                  }, [
+                    createElementVNode(
+                      "div",
+                      { class: "to-calendar-month-item-text" },
+                      toDisplayString(unref(t)("to.calendar.month.m4")),
+                      1
+                      /* TEXT */
+                    )
+                  ], 10, ["onClick"]),
+                  createElementVNode("div", {
+                    class: normalizeClass(["to-calendar-month-item", setMonthClass(5)]),
+                    role: "button",
+                    onClick: withModifiers(($event) => selectMonth(5), ["stop"])
+                  }, [
+                    createElementVNode(
+                      "div",
+                      { class: "to-calendar-month-item-text" },
+                      toDisplayString(unref(t)("to.calendar.month.m5")),
+                      1
+                      /* TEXT */
+                    )
+                  ], 10, ["onClick"]),
+                  createElementVNode("div", {
+                    class: normalizeClass(["to-calendar-month-item", setMonthClass(6)]),
+                    role: "button",
+                    onClick: withModifiers(($event) => selectMonth(6), ["stop"])
+                  }, [
+                    createElementVNode(
+                      "div",
+                      { class: "to-calendar-month-item-text" },
+                      toDisplayString(unref(t)("to.calendar.month.m6")),
+                      1
+                      /* TEXT */
+                    )
+                  ], 10, ["onClick"]),
+                  createElementVNode("div", {
+                    class: normalizeClass(["to-calendar-month-item", setMonthClass(7)]),
+                    role: "button",
+                    onClick: withModifiers(($event) => selectMonth(7), ["stop"])
+                  }, [
+                    createElementVNode(
+                      "div",
+                      { class: "to-calendar-month-item-text" },
+                      toDisplayString(unref(t)("to.calendar.month.m7")),
+                      1
+                      /* TEXT */
+                    )
+                  ], 10, ["onClick"]),
+                  createElementVNode("div", {
+                    class: normalizeClass(["to-calendar-month-item", setMonthClass(8)]),
+                    role: "button",
+                    onClick: withModifiers(($event) => selectMonth(8), ["stop"])
                   }, [
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(item.point, (ipoint, pointIndex) => {
-                      return withDirectives((openBlock(), createBlock(unref(ToTag), {
-                        key: pointIndex,
-                        type: _ctx.size === "large" ? "dot" : "",
-                        color: pointColor.value(ipoint.type),
-                        fillet: _ctx.size === "large" ? "" : "round"
-                      }, {
-                        default: withCtx(() => [
-                          createTextVNode(toDisplayString(ipoint.count), 1)
-                        ]),
-                        _: 2
-                      }, 1032, ["type", "color", "fillet"])), [
-                        [unref(tipDirective), ipoint.tooltip ? ipoint.tooltip : ""]
-                      ]);
-                    }), 128))
-                  ])) : createCommentVNode("", true)
+                    createElementVNode(
+                      "div",
+                      { class: "to-calendar-month-item-text" },
+                      toDisplayString(unref(t)("to.calendar.month.m8")),
+                      1
+                      /* TEXT */
+                    )
+                  ], 10, ["onClick"]),
+                  createElementVNode("div", {
+                    class: normalizeClass(["to-calendar-month-item", setMonthClass(9)]),
+                    role: "button",
+                    onClick: withModifiers(($event) => selectMonth(9), ["stop"])
+                  }, [
+                    createElementVNode(
+                      "div",
+                      { class: "to-calendar-month-item-text" },
+                      toDisplayString(unref(t)("to.calendar.month.m9")),
+                      1
+                      /* TEXT */
+                    )
+                  ], 10, ["onClick"]),
+                  createElementVNode("div", {
+                    class: normalizeClass(["to-calendar-month-item", setMonthClass(10)]),
+                    role: "button",
+                    onClick: withModifiers(($event) => selectMonth(10), ["stop"])
+                  }, [
+                    createElementVNode(
+                      "div",
+                      { class: "to-calendar-month-item-text" },
+                      toDisplayString(unref(t)("to.calendar.month.m10")),
+                      1
+                      /* TEXT */
+                    )
+                  ], 10, ["onClick"]),
+                  createElementVNode("div", {
+                    class: normalizeClass(["to-calendar-month-item", setMonthClass(11)]),
+                    role: "button",
+                    onClick: withModifiers(($event) => selectMonth(11), ["stop"])
+                  }, [
+                    createElementVNode(
+                      "div",
+                      { class: "to-calendar-month-item-text" },
+                      toDisplayString(unref(t)("to.calendar.month.m11")),
+                      1
+                      /* TEXT */
+                    )
+                  ], 10, ["onClick"]),
+                  createElementVNode("div", {
+                    class: normalizeClass(["to-calendar-month-item", setMonthClass(12)]),
+                    role: "button",
+                    onClick: withModifiers(($event) => selectMonth(12), ["stop"])
+                  }, [
+                    createElementVNode(
+                      "div",
+                      { class: "to-calendar-month-item-text" },
+                      toDisplayString(unref(t)("to.calendar.month.m12")),
+                      1
+                      /* TEXT */
+                    )
+                  ], 10, ["onClick"])
                 ])
-              ], 10, ["onClick"])), [
-                [unref(vDis), isDisableDay.value(item)]
-              ]);
-            }), 128))
-          ])
-        ])) : createCommentVNode("", true),
-        _ctx.legend ? (openBlock(), createElementBlock("div", {
-          key: 2,
-          class: "to-calendar-legend"
-        }, [
-          renderSlot(_ctx.$slots, "legend")
-        ])) : createCommentVNode("", true),
+              ],
+              512
+              /* NEED_PATCH */
+            ), [
+              [vShow, monthLayer.value || _ctx.type === "month"]
+            ]),
+            createCommentVNode(" \u5468 "),
+            _ctx.type !== "month" ? withDirectives((openBlock(), createElementBlock(
+              "div",
+              {
+                key: 0,
+                class: "to-calendar-week"
+              },
+              [
+                createElementVNode(
+                  "div",
+                  { class: "to-calendar-week-item" },
+                  toDisplayString(unref(t)("to.calendar.week.w0")),
+                  1
+                  /* TEXT */
+                ),
+                createElementVNode(
+                  "div",
+                  { class: "to-calendar-week-item" },
+                  toDisplayString(unref(t)("to.calendar.week.w1")),
+                  1
+                  /* TEXT */
+                ),
+                createElementVNode(
+                  "div",
+                  { class: "to-calendar-week-item" },
+                  toDisplayString(unref(t)("to.calendar.week.w2")),
+                  1
+                  /* TEXT */
+                ),
+                createElementVNode(
+                  "div",
+                  { class: "to-calendar-week-item" },
+                  toDisplayString(unref(t)("to.calendar.week.w3")),
+                  1
+                  /* TEXT */
+                ),
+                createElementVNode(
+                  "div",
+                  { class: "to-calendar-week-item" },
+                  toDisplayString(unref(t)("to.calendar.week.w4")),
+                  1
+                  /* TEXT */
+                ),
+                createElementVNode(
+                  "div",
+                  { class: "to-calendar-week-item" },
+                  toDisplayString(unref(t)("to.calendar.week.w5")),
+                  1
+                  /* TEXT */
+                ),
+                createElementVNode(
+                  "div",
+                  { class: "to-calendar-week-item" },
+                  toDisplayString(unref(t)("to.calendar.week.w6")),
+                  1
+                  /* TEXT */
+                )
+              ],
+              512
+              /* NEED_PATCH */
+            )), [
+              [vShow, !(monthLayer.value || _ctx.type === "month")]
+            ]) : createCommentVNode("v-if", true),
+            createCommentVNode(" \u65E5 "),
+            _ctx.type !== "month" ? withDirectives((openBlock(), createElementBlock(
+              "div",
+              {
+                key: 1,
+                class: "to-calendar-day"
+              },
+              [
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(days.value, (item, index) => {
+                    return withDirectives((openBlock(), createElementBlock("div", {
+                      key: index,
+                      class: normalizeClass(["to-calendar-day-item", setDayClass(item)]),
+                      role: "button",
+                      onClick: ($event) => selectDay(item)
+                    }, [
+                      renderSlot(_ctx.$slots, "default", {
+                        item,
+                        index
+                      }, () => [
+                        item.value ? (openBlock(), createElementBlock(
+                          "div",
+                          {
+                            key: 0,
+                            class: "to-calendar-day-text"
+                          },
+                          toDisplayString(dayText.value(item.value)),
+                          1
+                          /* TEXT */
+                        )) : createCommentVNode("v-if", true),
+                        item.point && item.point.length > 0 ? (openBlock(), createElementBlock("div", {
+                          key: 1,
+                          class: "to-calendar-day-points"
+                        }, [
+                          (openBlock(true), createElementBlock(
+                            Fragment,
+                            null,
+                            renderList(item.point, (ipoint, pointIndex) => {
+                              return withDirectives((openBlock(), createBlock(unref(ToTag), {
+                                key: pointIndex,
+                                type: _ctx.size === "large" ? "dot" : "",
+                                color: pointColor.value(ipoint.type)
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(
+                                    toDisplayString(ipoint.count),
+                                    1
+                                    /* TEXT */
+                                  )
+                                ]),
+                                _: 2
+                                /* DYNAMIC */
+                              }, 1032, ["type", "color"])), [
+                                [unref(tipDirective), ipoint.tooltip ? ipoint.tooltip : ""]
+                              ]);
+                            }),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ])) : createCommentVNode("v-if", true)
+                      ])
+                    ], 10, ["onClick"])), [
+                      [unref(vDis), isDisableDay.value(item)]
+                    ]);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ],
+              512
+              /* NEED_PATCH */
+            )), [
+              [vShow, !(monthLayer.value || _ctx.type === "month")]
+            ]) : createCommentVNode("v-if", true),
+            createCommentVNode(" \u56FE\u4F8B "),
+            _ctx.legend ? withDirectives((openBlock(), createElementBlock(
+              "div",
+              {
+                key: 2,
+                class: "to-calendar-legend"
+              },
+              [
+                renderSlot(_ctx.$slots, "legend", {}, () => [
+                  createCommentVNode(' <to-tag type="dot" color="danger">\u903E\u671F\u672A\u5B8C\u6210</to-tag>\n						<to-tag type="dot" color="primary">\u6B63\u5E38\u8FDB\u884C\u4E2D</to-tag>\n						<to-tag type="dot" color="success">\u5DF2\u5B8C\u6210</to-tag> ')
+                ])
+              ],
+              512
+              /* NEED_PATCH */
+            )), [
+              [vShow, !(monthLayer.value || _ctx.type === "month")]
+            ]) : createCommentVNode("v-if", true)
+          ])) : createCommentVNode("v-if", true),
+          createCommentVNode(" \u65F6\u95F4 "),
+          _ctx.type === "datetime" || _ctx.type === "time" ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: "to-calendar-time"
+          }, [
+            createElementVNode("div", { class: "to-calendar-time-info" }, [
+              createElementVNode(
+                "div",
+                { class: "to-calendar-time-info-text" },
+                toDisplayString(addZero(hour.value)) + ":" + toDisplayString(addZero(minute.value)) + ":" + toDisplayString(addZero(second.value)),
+                1
+                /* TEXT */
+              )
+            ]),
+            createElementVNode("div", { class: "to-calendar-time-content" }, [
+              createVNode(
+                unref(ToScroll),
+                {
+                  ref_key: "hourScroll",
+                  ref: hourScroll,
+                  class: "to-calendar-time-list"
+                },
+                {
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(hours.value, (item) => {
+                        return withDirectives((openBlock(), createElementBlock("div", {
+                          key: item,
+                          class: normalizeClass([{ "is-on": hour.value === item }, "to-calendar-time-item"]),
+                          role: "button",
+                          onClick: ($event) => selectHour(item)
+                        }, [
+                          createElementVNode(
+                            "div",
+                            { class: "to-calendar-time-item-text" },
+                            toDisplayString(addZero(item)),
+                            1
+                            /* TEXT */
+                          )
+                        ], 10, ["onClick"])), [
+                          [unref(vDis), isDisableHour.value(item)]
+                        ]);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]),
+                  _: 1
+                  /* STABLE */
+                },
+                512
+                /* NEED_PATCH */
+              ),
+              createVNode(
+                unref(ToScroll),
+                {
+                  ref_key: "minuteScroll",
+                  ref: minuteScroll,
+                  class: "to-calendar-time-list"
+                },
+                {
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(minutes.value, (item) => {
+                        return withDirectives((openBlock(), createElementBlock("div", {
+                          key: item,
+                          class: normalizeClass([{ "is-on": minute.value === item }, "to-calendar-time-item"]),
+                          role: "button",
+                          onClick: ($event) => selectMinute(item)
+                        }, [
+                          createElementVNode(
+                            "div",
+                            { class: "to-calendar-time-item-text" },
+                            toDisplayString(addZero(item)),
+                            1
+                            /* TEXT */
+                          )
+                        ], 10, ["onClick"])), [
+                          [unref(vDis), isDisableMinute.value(item)]
+                        ]);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]),
+                  _: 1
+                  /* STABLE */
+                },
+                512
+                /* NEED_PATCH */
+              ),
+              createVNode(
+                unref(ToScroll),
+                {
+                  ref_key: "secondScroll",
+                  ref: secondScroll,
+                  class: "to-calendar-time-list"
+                },
+                {
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(seconds.value, (item) => {
+                        return withDirectives((openBlock(), createElementBlock("div", {
+                          key: item,
+                          class: normalizeClass([{ "is-on": second.value === item }, "to-calendar-time-item"]),
+                          role: "button",
+                          onClick: ($event) => selectSecond(item)
+                        }, [
+                          createElementVNode(
+                            "div",
+                            { class: "to-calendar-time-item-text" },
+                            toDisplayString(addZero(item)),
+                            1
+                            /* TEXT */
+                          )
+                        ], 10, ["onClick"])), [
+                          [unref(vDis), isDisableSecond.value(item)]
+                        ]);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]),
+                  _: 1
+                  /* STABLE */
+                },
+                512
+                /* NEED_PATCH */
+              )
+            ])
+          ])) : createCommentVNode("v-if", true)
+        ]),
+        createCommentVNode(" \u64CD\u4F5C "),
         _ctx.type === "datetime" || _ctx.type === "time" ? (openBlock(), createElementBlock("div", {
-          key: 3,
-          class: "time"
+          key: 0,
+          class: "to-calendar-fn"
         }, [
-          createElementVNode("div", { class: "input to-calendar-time-input" }, [
-            createVNode(unref(ToInput), {
-              modelValue: hour.value,
-              "onUpdate:modelValue": ($event) => hour.value = $event,
-              type: "number",
-              mode: "none",
-              placeholder: unref(t)("to.calendar.time.hPlaceholder"),
-              width: "full",
-              maxlength: 2,
-              max: maxHour.value,
-              min: 0,
-              onClick: showTimeLayer
-            }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder", "max"])
-          ]),
-          createElementVNode("span", { class: "text" }, ":"),
-          createElementVNode("span", { class: "input to-calendar-time-input" }, [
-            createVNode(unref(ToInput), {
-              modelValue: minute.value,
-              "onUpdate:modelValue": ($event) => minute.value = $event,
-              type: "number",
-              mode: "none",
-              placeholder: unref(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"])
-          ]),
-          createElementVNode("span", { class: "text" }, ":"),
-          createElementVNode("span", { class: "input to-calendar-time-input" }, [
-            createVNode(unref(ToInput), {
-              modelValue: second.value,
-              "onUpdate:modelValue": ($event) => second.value = $event,
-              type: "number",
-              mode: "none",
-              placeholder: unref(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"])
-          ]),
-          createVNode(unref(ToButton), {
-            color: "primary",
-            onClick: selectTime
+          createVNode(_component_to_button, {
+            class: "to-calendar-fn-now",
+            onClick: moment
           }, {
             default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(t)("to.common.confirm")), 1)
+              createTextVNode(
+                toDisplayString(unref(t)("to.common.now")),
+                1
+                /* TEXT */
+              )
             ]),
             _: 1
+            /* STABLE */
           }),
-          withDirectives(createElementVNode("div", { class: "option" }, [
-            createVNode(unref(ToHeader), {
-              title: unref(t)("to.calendar.time.title"),
-              color: "primary",
-              mode: "fill"
-            }, {
-              default: withCtx(() => [
-                createVNode(unref(ToButton), {
-                  mode: "none",
-                  color: "bg",
-                  icon: "close",
-                  onClick: closeTimeLayer
-                })
-              ]),
-              _: 1
-            }, 8, ["title"]),
-            createElementVNode("div", { class: "content" }, [
-              createVNode(unref(ToScroll), {
-                ref_key: "hourScroll",
-                ref: hourScroll,
-                vitrual: false,
-                "bar-display": "hover"
-              }, {
-                default: withCtx(() => [
-                  createVNode(unref(ToPadding), { value: 0.5 }, {
-                    default: withCtx(() => [
-                      createVNode(unref(ToGrid), { col: 2 }, {
-                        default: withCtx(() => [
-                          (openBlock(true), createElementBlock(Fragment, null, renderList(hours.value, (item) => {
-                            return openBlock(), createBlock(unref(ToGridItem), { key: item }, {
-                              default: withCtx(() => [
-                                withDirectives((openBlock(), createBlock(unref(ToCard), {
-                                  fillet: "normal",
-                                  color: hour.value === item ? "warning" : "default",
-                                  mode: hour.value === item ? "fill" : "none",
-                                  link: "",
-                                  onClick: ($event) => hour.value = item
-                                }, {
-                                  default: withCtx(() => [
-                                    createTextVNode(toDisplayString(item), 1)
-                                  ]),
-                                  _: 2
-                                }, 1032, ["color", "mode", "onClick"])), [
-                                  [unref(vDis), isDisableHour.value(item)]
-                                ])
-                              ]),
-                              _: 2
-                            }, 1024);
-                          }), 128))
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }, 512),
-              createVNode(unref(ToScroll), {
-                ref_key: "minuteScroll",
-                ref: minuteScroll,
-                vitrual: false,
-                "bar-display": "hover"
-              }, {
-                default: withCtx(() => [
-                  createVNode(unref(ToPadding), { value: 0.5 }, {
-                    default: withCtx(() => [
-                      createVNode(unref(ToGrid), { col: 2 }, {
-                        default: withCtx(() => [
-                          (openBlock(true), createElementBlock(Fragment, null, renderList(minutes.value, (item) => {
-                            return openBlock(), createBlock(unref(ToGridItem), { key: item }, {
-                              default: withCtx(() => [
-                                withDirectives((openBlock(), createBlock(unref(ToCard), {
-                                  fillet: "normal",
-                                  color: minute.value === item ? "warning" : "default",
-                                  mode: minute.value === item ? "fill" : "none",
-                                  link: "",
-                                  onClick: ($event) => minute.value = item
-                                }, {
-                                  default: withCtx(() => [
-                                    createTextVNode(toDisplayString(item), 1)
-                                  ]),
-                                  _: 2
-                                }, 1032, ["color", "mode", "onClick"])), [
-                                  [unref(vDis), isDisableMinute.value(item)]
-                                ])
-                              ]),
-                              _: 2
-                            }, 1024);
-                          }), 128))
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }, 512),
-              createVNode(unref(ToScroll), {
-                ref_key: "secondScroll",
-                ref: secondScroll,
-                vitrual: false,
-                "bar-display": "hover"
-              }, {
-                default: withCtx(() => [
-                  createVNode(unref(ToPadding), { value: 0.5 }, {
-                    default: withCtx(() => [
-                      createVNode(unref(ToGrid), { col: 2 }, {
-                        default: withCtx(() => [
-                          (openBlock(true), createElementBlock(Fragment, null, renderList(seconds.value, (item) => {
-                            return openBlock(), createBlock(unref(ToGridItem), { key: item }, {
-                              default: withCtx(() => [
-                                withDirectives((openBlock(), createBlock(unref(ToCard), {
-                                  fillet: "normal",
-                                  color: second.value === item ? "warning" : "default",
-                                  mode: second.value === item ? "fill" : "none",
-                                  link: "",
-                                  onClick: ($event) => second.value = item
-                                }, {
-                                  default: withCtx(() => [
-                                    createTextVNode(toDisplayString(item), 1)
-                                  ]),
-                                  _: 2
-                                }, 1032, ["color", "mode", "onClick"])), [
-                                  [unref(vDis), isDisableSecond.value(item)]
-                                ])
-                              ]),
-                              _: 2
-                            }, 1024);
-                          }), 128))
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }, 512)
-            ])
-          ], 512), [
-            [vShow, timeLayer.value]
-          ])
-        ])) : createCommentVNode("", true)
-      ], 6);
+          createVNode(_component_to_button, {
+            class: "to-calendar-fn-confirm",
+            onClick: confirm
+          }, {
+            default: withCtx(() => [
+              createTextVNode(
+                toDisplayString(unref(t)("to.common.confirm")),
+                1
+                /* TEXT */
+              )
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ])) : createCommentVNode("v-if", true)
+      ], 14, ["flex"]);
     };
   }
 });