@nutui/nutui 3.1.16 → 3.1.18-beta.0

package/dist/packages/_es/Calendar.js

@@ -15,11 +15,11 @@ var __spreadValues = (a, b) => {
   return a;
 };
 /*!
-* @nutui/nutui v3.1.16 Sun Jan 30 2022 10:58:10 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.18-beta.0 Tue Mar 08 2022 10:41:31 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */
-import { ref, reactive, watch, toRefs, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, toDisplayString, createCommentVNode, renderList, withModifiers, resolveComponent, createBlock, withCtx, createVNode } from "vue";
+import { ref, computed, reactive, watch, toRefs, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, renderSlot, Fragment, renderList, normalizeStyle, createTextVNode, resolveComponent, createBlock, withCtx, createSlots } from "vue";
 import { c as createComponent } from "./component.js";
 import { r as requestAniFrame } from "./raf.js";
 import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
@@ -119,12 +119,36 @@ const _sfc_main$1 = create$1({
       type: Boolean,
       default: true
     },
+    showTitle: {
+      type: Boolean,
+      default: true
+    },
+    showSubTitle: {
+      type: Boolean,
+      default: true
+    },
+    showToday: {
+      type: Boolean,
+      default: true
+    },
     title: {
       type: String,
       default: "\u65E5\u5386\u9009\u62E9"
     },
-    defaultValue: {
+    confirmText: {
+      type: String,
+      default: "\u786E\u8BA4"
+    },
+    startText: {
       type: String,
+      default: "\u5F00\u59CB"
+    },
+    endText: {
+      type: String,
+      default: "\u7ED3\u675F"
+    },
+    defaultValue: {
+      type: [String, Array],
       default: null
     },
     startDate: {
@@ -136,15 +160,32 @@ const _sfc_main$1 = create$1({
       default: Utils.getDay(365)
     }
   },
-  emits: ["choose", "update", "close"],
-  setup(props, { emit }) {
+  emits: ["choose", "update", "close", "select"],
+  setup(props, { emit, slots }) {
     const weeks = ref(["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"]);
     const months = ref(null);
     const monthsPanel = ref(null);
     const weeksPanel = ref(null);
+    const viewArea = ref(null);
+    const viewHeight = ref(0);
+    const compConthsData = computed(() => {
+      return state.monthsData.slice(state.defaultRange[0], state.defaultRange[1]);
+    });
+    const showTopBtn = computed(() => {
+      return slots.btn;
+    });
+    const topInfo = computed(() => {
+      return slots.topInfo;
+    });
+    const bottomInfo = computed(() => {
+      return slots.bottomInfo;
+    });
     const state = reactive({
       yearMonthTitle: "",
+      defaultRange: [],
       currDate: "",
+      propStartDate: "",
+      propEndDate: "",
       unLoadPrev: false,
       touchParams: {
         startY: 0,
@@ -164,7 +205,10 @@ const _sfc_main$1 = create$1({
       startData: "",
       endData: "",
       isRange: props.type === "range",
-      timer: 0
+      timer: 0,
+      currentIndex: 0,
+      avgHeight: 0,
+      monthsNum: 0
     });
     const splitDate = (date) => {
       return date.split("-");
@@ -176,14 +220,14 @@ const _sfc_main$1 = create$1({
       return Utils.isEqual(state.currDate[1], currDate);
     };
     const getCurrDate = (day, month, isRange) => {
-      return isRange ? month.curData[3] + "-" + month.curData[4] + "-" + Utils.getNumTwoBit(+day.day) : month.curData[0] + "-" + month.curData[1] + "-" + Utils.getNumTwoBit(+day.day);
+      return month.curData[0] + "-" + month.curData[1] + "-" + Utils.getNumTwoBit(+day.day);
     };
     const getClass = (day, month, isRange) => {
-      const currDate = getCurrDate(day, month, isRange);
+      const currDate = getCurrDate(day, month);
       if (day.type == "curr") {
         if (!state.isRange && Utils.isEqual(state.currDate, currDate) || state.isRange && (isStart(currDate) || isEnd(currDate))) {
           return `${state.dayPrefix}-active`;
-        } else if (props.startDate && Utils.compareDate(currDate, props.startDate) || props.endDate && Utils.compareDate(props.endDate, currDate)) {
+        } else if (state.propStartDate && Utils.compareDate(currDate, state.propStartDate) || state.propEndDate && Utils.compareDate(state.propEndDate, currDate)) {
           return `${state.dayPrefix}-disabled`;
         } else if (state.isRange && Array.isArray(state.currDate) && Object.values(state.currDate).length == 2 && Utils.compareDate(state.currDate[0], currDate) && Utils.compareDate(currDate, state.currDate[1])) {
           return `${state.dayPrefix}-choose`;
@@ -203,9 +247,8 @@ const _sfc_main$1 = create$1({
       }
     };
     const chooseDay = (day, month, isFirst, isRange) => {
-      if (getClass(day, month, isRange) != `${state.dayPrefix}-disabled`) {
+      if (getClass(day, month) != `${state.dayPrefix}-disabled`) {
         let days = [...month.curData];
-        days = isRange ? days.splice(3) : days.splice(0, 3);
         days[2] = typeof day.day == "number" ? Utils.getNumTwoBit(day.day) : day.day;
         days[3] = `${days[0]}-${days[1]}-${days[2]}`;
         days[4] = Utils.getWhatDay(+days[0], +days[1], +days[2]);
@@ -232,8 +275,11 @@ const _sfc_main$1 = create$1({
             }
           }
         }
-        if (props.isAutoBackFill && !isFirst) {
-          confirm();
+        if (!isFirst) {
+          emit("select", state.chooseData);
+          if (props.isAutoBackFill) {
+            confirm();
+          }
         }
       }
     };
@@ -251,26 +297,47 @@ const _sfc_main$1 = create$1({
           month = month == 12 ? 1 : ++month;
           break;
       }
-      return [
-        year,
-        Utils.getNumTwoBit(month),
-        Utils.getMonthDays(String(year), String(month))
-      ];
+      return [year, Utils.getNumTwoBit(month), Utils.getMonthDays(String(year), String(month))];
     };
-    const getDaysStatus = (days, type) => {
+    const getDaysStatus = (days, type, dateInfo) => {
+      let { year, month } = dateInfo;
       if (type == "prev" && days >= 7) {
         days -= 7;
       }
       return Array.from(Array(days), (v, k) => {
         return {
           day: k + 1,
-          type
+          type,
+          year,
+          month
         };
       });
     };
+    const getPreDaysStatus = (days, type, dateInfo, preCurrMonthDays) => {
+      let { year, month } = dateInfo;
+      if (type == "prev" && days >= 7) {
+        days -= 7;
+      }
+      let months2 = Array.from(Array(preCurrMonthDays), (v, k) => {
+        return {
+          day: k + 1,
+          type,
+          year,
+          month
+        };
+      });
+      return months2.slice(preCurrMonthDays - days);
+    };
     const getMonth = (curData, type) => {
       const preMonthDays = Utils.getMonthPreDay(+curData[0], +curData[1]);
+      let preMonth = curData[1] - 1;
+      let preYear = curData[0];
+      if (preMonth <= 0) {
+        preMonth = 12;
+        preYear += 1;
+      }
       const currMonthDays = Utils.getMonthDays(curData[0], curData[1]);
+      const preCurrMonthDays = Utils.getMonthDays(preYear + "", preMonth + "");
       const title = {
         year: curData[0],
         month: curData[1]
@@ -279,10 +346,16 @@ const _sfc_main$1 = create$1({
         curData,
         title: `${title.year}\u5E74${title.month}\u6708`,
         monthData: [
-          ...getDaysStatus(preMonthDays, "prev"),
-          ...getDaysStatus(currMonthDays, "curr")
+          ...getPreDaysStatus(preMonthDays, "prev", { month: preMonth, year: preYear }, preCurrMonthDays),
+          ...getDaysStatus(currMonthDays, "curr", title)
         ]
       };
+      monthInfo.cssHeight = 39 + (monthInfo.monthData.length > 35 ? 384 : 320);
+      let cssScrollHeight = 0;
+      if (state.monthsData.length > 0) {
+        cssScrollHeight = state.monthsData[state.monthsData.length - 1].cssScrollHeight + state.monthsData[state.monthsData.length - 1].cssHeight;
+      }
+      monthInfo.cssScrollHeight = cssScrollHeight;
       if (type == "next") {
         if (!state.endData || !Utils.compareDate(`${state.endData[0]}-${state.endData[1]}-${Utils.getMonthDays(state.endData[0], state.endData[1])}`, `${curData[0]}-${curData[1]}-${curData[2]}`)) {
           state.monthsData.push(monthInfo);
@@ -296,44 +369,97 @@ const _sfc_main$1 = create$1({
       }
     };
     const initData = () => {
-      state.startData = props.startDate ? splitDate(props.startDate) : "";
-      state.endData = props.endDate ? splitDate(props.endDate) : "";
-      if (!props.defaultValue) {
+      let propStartDate = props.startDate ? props.startDate : Utils.getDay(0);
+      let propEndDate = props.endDate ? props.endDate : Utils.getDay(365);
+      state.propStartDate = propStartDate;
+      state.propEndDate = propEndDate;
+      state.startData = splitDate(propStartDate);
+      state.endData = splitDate(propEndDate);
+      if (!props.defaultValue || Array.isArray(props.defaultValue) && props.defaultValue.length <= 0) {
         state.currDate = state.isRange ? [Utils.date2Str(new Date()), Utils.getDay(1)] : Utils.date2Str(new Date());
       } else {
         state.currDate = state.isRange ? [...props.defaultValue] : props.defaultValue;
       }
+      const startDate = {
+        year: Number(state.startData[0]),
+        month: Number(state.startData[1])
+      };
+      const endDate = {
+        year: Number(state.endData[0]),
+        month: Number(state.endData[1])
+      };
+      let monthsNum = endDate.month - startDate.month;
+      if (endDate.year - startDate.year > 0) {
+        monthsNum = monthsNum + 12 * (endDate.year - startDate.year);
+      }
+      getMonth(state.startData, "next");
+      let i = 1;
+      do {
+        getMonth(getCurrData("next"), "next");
+      } while (i++ < monthsNum);
+      state.monthsNum = monthsNum;
       if (state.isRange && Array.isArray(state.currDate)) {
-        if (props.startDate && Utils.compareDate(state.currDate[0], props.startDate)) {
-          state.currDate.splice(0, 1, props.startDate);
+        if (propStartDate && Utils.compareDate(state.currDate[0], propStartDate)) {
+          state.currDate.splice(0, 1, propStartDate);
         }
-        if (props.endDate && Utils.compareDate(props.endDate, state.currDate[1])) {
-          state.currDate.splice(1, 1, props.endDate);
+        if (propEndDate && Utils.compareDate(propEndDate, state.currDate[1])) {
+          state.currDate.splice(1, 1, propEndDate);
         }
-        state.defaultData = [
-          ...splitDate(state.currDate[0]),
-          ...splitDate(state.currDate[1])
-        ];
+        state.defaultData = [...splitDate(state.currDate[0]), ...splitDate(state.currDate[1])];
       } else {
-        if (props.startDate && Utils.compareDate(state.currDate, props.startDate)) {
-          state.currDate = props.startDate;
-        } else if (props.endDate && !Utils.compareDate(state.currDate, props.endDate)) {
-          state.currDate = props.endDate;
+        if (propStartDate && Utils.compareDate(state.currDate, propStartDate)) {
+          state.currDate = propStartDate;
+        } else if (propEndDate && !Utils.compareDate(state.currDate, propEndDate)) {
+          state.currDate = propEndDate;
         }
         state.defaultData = [...splitDate(state.currDate)];
       }
-      getMonth(state.defaultData, "next");
-      state.yearMonthTitle = state.monthsData[0].title;
-      let i = 1;
-      do {
-        getMonth(getCurrData("next"), "next");
-      } while (i++ < 4);
+      let current = 0;
+      let lastCurrent = 0;
+      state.monthsData.forEach((item, index2) => {
+        if (item.title == `${state.defaultData[0]}\u5E74${state.defaultData[1]}\u6708`) {
+          current = index2;
+        }
+        if (state.isRange) {
+          if (item.title == `${state.defaultData[3]}\u5E74${state.defaultData[4]}\u6708`) {
+            lastCurrent = index2;
+          }
+        }
+      });
+      setDefaultRange(monthsNum, current);
+      state.currentIndex = current;
+      state.yearMonthTitle = state.monthsData[state.currentIndex].title;
       if (state.isRange) {
-        chooseDay({ day: state.defaultData[2], type: "curr" }, state.monthsData[0], true);
-        chooseDay({ day: state.defaultData[5], type: "curr" }, state.monthsData[0], true, true);
+        chooseDay({ day: state.defaultData[2], type: "curr" }, state.monthsData[state.currentIndex], true);
+        chooseDay({ day: state.defaultData[5], type: "curr" }, state.monthsData[lastCurrent], true);
       } else {
-        chooseDay({ day: state.defaultData[2], type: "curr" }, state.monthsData[0], true);
+        chooseDay({ day: state.defaultData[2], type: "curr" }, state.monthsData[state.currentIndex], true);
       }
+      let lastItem = state.monthsData[state.monthsData.length - 1];
+      let containerHeight = lastItem.cssHeight + lastItem.cssScrollHeight;
+      requestAniFrame(() => {
+        if ((months == null ? void 0 : months.value) && (monthsPanel == null ? void 0 : monthsPanel.value) && (viewArea == null ? void 0 : viewArea.value)) {
+          viewHeight.value = months.value.clientHeight;
+          monthsPanel.value.style.height = `${containerHeight}px`;
+          months.value.scrollTop = state.monthsData[state.currentIndex].cssScrollHeight;
+        }
+      });
+      state.avgHeight = Math.floor(containerHeight / (monthsNum + 1));
+    };
+    const setDefaultRange = (monthsNum, current) => {
+      if (monthsNum >= 3) {
+        if (current > 0 && current < monthsNum) {
+          state.defaultRange = [current - 1, current + 3];
+        } else if (current == 0) {
+          state.defaultRange = [current, current + 4];
+        } else if (current == monthsNum) {
+          state.defaultRange = [current - 2, current + 2];
+        }
+      } else {
+        state.defaultRange = [0, monthsNum + 2];
+      }
+      let defaultScrollTop = state.monthsData[state.defaultRange[0]].cssScrollHeight;
+      state.translateY = defaultScrollTop;
     };
     const isActive = (day, month) => {
       return state.isRange && day.type == "curr" && getClass(day, month) == "calendar-month-day-active";
@@ -346,139 +472,72 @@ const _sfc_main$1 = create$1({
       }
     };
     const isEndTip = (day, month) => {
-      return isActive(day, month);
+      if (state.currDate.length >= 2 && isEnd(getCurrDate(day, month))) {
+        return isActive(day, month);
+      }
+      return false;
+    };
+    const rangeTip = (day, month) => {
+      if (state.currDate.length >= 2) {
+        return Utils.isEqual(state.currDate[0], state.currDate[1]);
+      }
     };
     const isCurrDay = (month, day) => {
       const date = `${month.curData[0]}-${month.curData[1]}-${day}`;
       return Utils.isEqual(date, Utils.date2Str(new Date()));
     };
-    const loadScroll = () => {
-      if (!props.poppable) {
-        return false;
-      }
-      requestAniFrame(() => {
-        if ((weeksPanel == null ? void 0 : weeksPanel.value) && (monthsPanel == null ? void 0 : monthsPanel.value)) {
-          const top = weeksPanel == null ? void 0 : weeksPanel.value.getBoundingClientRect().bottom;
-          const monthsDoms = monthsPanel.value.getElementsByClassName("calendar-month");
-          for (let i = 0; i < monthsDoms.length; i++) {
-            if (monthsDoms[i].getBoundingClientRect().top <= top && monthsDoms[i].getBoundingClientRect().bottom >= top) {
-              state.yearMonthTitle = state.monthsData[i].title;
-            } else if (state.scrollDistance === 0) {
-              state.yearMonthTitle = state.monthsData[0].title;
-            }
-          }
-        }
-      });
-    };
-    const setTransform = (translateY = 0, type, time = 1e3) => {
-      if (monthsPanel == null ? void 0 : monthsPanel.value) {
-        if (type === "end") {
-          monthsPanel.value.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`;
-          clearTimeout(state.timer);
-          state.timer = setTimeout(() => {
-            loadScroll();
-          }, time);
-        } else {
-          monthsPanel.value.style.webkitTransition = "";
-          loadScroll();
-        }
-        monthsPanel.value.style.webkitTransform = `translateY(${translateY}px)`;
-        state.scrollDistance = translateY;
-      }
-    };
-    const setMove = (move, type, time) => {
-      var _a, _b;
-      let updateMove = move + state.transformY;
-      const h = ((_a = months.value) == null ? void 0 : _a.offsetHeight) || 0;
-      const offsetHeight = ((_b = monthsPanel.value) == null ? void 0 : _b.offsetHeight) || 0;
-      if (type === "end") {
-        if (updateMove > 0) {
-          updateMove = 0;
+    const mothsViewScroll = (e) => {
+      var currentScrollTop = e.target.scrollTop;
+      let current = Math.floor(currentScrollTop / state.avgHeight);
+      if (current == 0) {
+        if (currentScrollTop >= state.monthsData[current + 1].cssScrollHeight) {
+          current += 1;
         }
-        if (updateMove < 0 && updateMove < -offsetHeight + h) {
-          updateMove = -offsetHeight + h;
+      } else if (current > 0 && current < state.monthsNum - 1) {
+        if (currentScrollTop >= state.monthsData[current + 1].cssScrollHeight) {
+          current += 1;
         }
-        if (offsetHeight <= h && state.monthsData.length == 1) {
-          updateMove = 0;
+        if (currentScrollTop < state.monthsData[current].cssScrollHeight) {
+          current -= 1;
         }
-        setTransform(updateMove, type, time);
       } else {
-        if (updateMove > 0 && updateMove > 100) {
-          updateMove = 100;
+        if (currentScrollTop + viewHeight.value < state.monthsData[current].cssScrollHeight + state.monthsData[current].cssHeight) {
+          current -= 1;
         }
-        if (updateMove < -offsetHeight + h - 100 && state.monthsData.length > 1) {
-          updateMove = -offsetHeight + h - 100;
+        if (current + 1 <= state.monthsNum && currentScrollTop + viewHeight.value >= state.monthsData[current + 1].cssScrollHeight + state.monthsData[current + 1].cssHeight) {
+          current += 1;
         }
-        if (updateMove < 0 && updateMove < -100 && state.monthsData.length == 1) {
-          updateMove = -100;
+        if (currentScrollTop < state.monthsData[current - 1].cssScrollHeight) {
+          current -= 1;
         }
-        setTransform(updateMove);
       }
-    };
-    const touchStart = (event) => {
-      const changedTouches = event.changedTouches[0];
-      state.touchParams.startY = changedTouches.pageY;
-      state.touchParams.startTime = event.timeStamp || Date.now();
-      state.transformY = state.scrollDistance;
-    };
-    const touchMove = (event) => {
-      const changedTouches = event.changedTouches[0];
-      state.touchParams.lastY = changedTouches.pageY;
-      state.touchParams.lastTime = event.timeStamp || Date.now();
-      const move = state.touchParams.lastY - state.touchParams.startY;
-      if (Math.abs(move) < 5) {
-        return false;
-      }
-      setMove(move);
-    };
-    const touchEnd = (event) => {
-      var _a, _b;
-      const changedTouches = event.changedTouches[0];
-      state.touchParams.lastY = changedTouches.pageY;
-      state.touchParams.lastTime = event.timeStamp || Date.now();
-      let move = state.touchParams.lastY - state.touchParams.startY;
-      if (Math.abs(move) < 5) {
-        return false;
-      }
-      const updateMove = move + state.transformY;
-      const h = ((_a = months.value) == null ? void 0 : _a.offsetHeight) || 0;
-      const offsetHeight = ((_b = monthsPanel.value) == null ? void 0 : _b.offsetHeight) || 0;
-      if (updateMove > 0) {
-        getMonth(getCurrData("prev"), "prev");
-      } else if (updateMove < 0 && updateMove < -offsetHeight + (Math.abs(move) > h ? Math.abs(move) : h) * 5) {
-        getMonth(getCurrData("next"), "next");
-        if (Math.abs(move) >= 300) {
-          getMonth(getCurrData("next"), "next");
-        }
-      }
-      let moveTime = state.touchParams.lastTime - state.touchParams.startTime;
-      if (moveTime <= 300) {
-        move = move * 2;
-        moveTime = moveTime + 1e3;
-        setMove(move, "end", moveTime);
-      } else {
-        setMove(move, "end");
+      if (state.currentIndex !== current) {
+        state.currentIndex = current;
+        setDefaultRange(state.monthsNum, current);
       }
+      state.yearMonthTitle = state.monthsData[current].title;
     };
     const resetRender = () => {
       state.chooseData.splice(0);
       state.monthsData.splice(0);
-      state.scrollDistance = 0;
-      state.translateY = 0;
-      setTransform(state.scrollDistance);
       initData();
     };
     initData();
     watch(() => props.defaultValue, (val) => {
       if (val) {
-        resetRender();
+        if (props.poppable) {
+          resetRender();
+        }
       }
     });
     return __spreadValues(__spreadValues({
       weeks,
-      touchStart,
-      touchMove,
-      touchEnd,
+      compConthsData,
+      showTopBtn,
+      topInfo,
+      bottomInfo,
+      rangeTip,
+      mothsViewScroll,
       getClass,
       isStartTip,
       isEndTip,
@@ -487,38 +546,52 @@ const _sfc_main$1 = create$1({
       confirm,
       monthsPanel,
       months,
-      weeksPanel
+      weeksPanel,
+      viewArea
     }, toRefs(state)), toRefs(props));
   }
 });
-const _hoisted_1 = { class: "calendar-title" };
-const _hoisted_2 = { class: "calendar-curr-month" };
+const _hoisted_1 = {
+  key: 0,
+  class: "calendar-title"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "calendar-top-slot"
+};
 const _hoisted_3 = {
+  key: 2,
+  class: "calendar-curr-month"
+};
+const _hoisted_4 = {
   class: "calendar-weeks",
   ref: "weeksPanel"
 };
-const _hoisted_4 = {
+const _hoisted_5 = {
   class: "calendar-months-panel",
   ref: "monthsPanel"
 };
-const _hoisted_5 = { class: "calendar-loading-tip" };
 const _hoisted_6 = { class: "calendar-month-title" };
 const _hoisted_7 = { class: "calendar-month-con" };
 const _hoisted_8 = ["onClick"];
 const _hoisted_9 = { class: "calendar-day" };
 const _hoisted_10 = {
   key: 0,
-  class: "calendar-curr-tips"
+  class: "calendar-curr-tips calendar-curr-tips-top"
 };
 const _hoisted_11 = {
   key: 1,
-  class: "calendar-day-tip"
+  class: "calendar-curr-tips calendar-curr-tips-bottom"
 };
 const _hoisted_12 = {
   key: 2,
-  class: "calendar-day-tip"
+  class: "calendar-curr-tip-curr"
 };
 const _hoisted_13 = {
+  key: 4,
+  class: "calendar-day-tip"
+};
+const _hoisted_14 = {
   key: 0,
   class: "nut-calendar-footer"
 };
@@ -532,11 +605,12 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     createElementVNode("view", {
       class: normalizeClass(["nut-calendar-header", { "nut-calendar-header-tile": !_ctx.poppable }])
     }, [
-      _ctx.poppable ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        createElementVNode("view", _hoisted_1, toDisplayString(_ctx.title), 1),
-        createElementVNode("view", _hoisted_2, toDisplayString(_ctx.yearMonthTitle), 1)
-      ], 64)) : createCommentVNode("", true),
-      createElementVNode("view", _hoisted_3, [
+      _ctx.showTitle ? (openBlock(), createElementBlock("view", _hoisted_1, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
+      _ctx.showTopBtn ? (openBlock(), createElementBlock("view", _hoisted_2, [
+        renderSlot(_ctx.$slots, "btn")
+      ])) : createCommentVNode("", true),
+      _ctx.showSubTitle ? (openBlock(), createElementBlock("view", _hoisted_3, toDisplayString(_ctx.yearMonthTitle), 1)) : createCommentVNode("", true),
+      createElementVNode("view", _hoisted_4, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.weeks, (item, index2) => {
           return openBlock(), createElementBlock("view", {
             class: "calendar-week-item",
@@ -548,44 +622,67 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     createElementVNode("view", {
       class: "nut-calendar-content",
       ref: "months",
-      onTouchstart: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.touchStart && _ctx.touchStart(...args), ["stop"])),
-      onTouchmove: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.touchMove && _ctx.touchMove(...args), ["stop", "prevent"])),
-      onTouchend: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.touchEnd && _ctx.touchEnd(...args), ["stop"]))
+      onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.mothsViewScroll && _ctx.mothsViewScroll(...args))
     }, [
-      createElementVNode("view", _hoisted_4, [
-        createElementVNode("view", _hoisted_5, toDisplayString(!_ctx.unLoadPrev ? "\u52A0\u8F7D\u4E0A\u4E00\u4E2A\u6708" : "\u6CA1\u6709\u66F4\u65E9\u6708\u4EFD"), 1),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.monthsData, (month, index2) => {
-          return openBlock(), createElementBlock("view", {
-            class: "calendar-month",
-            key: index2
-          }, [
-            createElementVNode("view", _hoisted_6, toDisplayString(month.title), 1),
-            createElementVNode("view", _hoisted_7, [
-              createElementVNode("view", {
-                class: normalizeClass(["calendar-month-item", _ctx.type === "range" ? "month-item-range" : ""])
-              }, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(month.monthData, (day, i) => {
-                  return openBlock(), createElementBlock("view", {
-                    key: i,
-                    class: normalizeClass(["calendar-month-day", _ctx.getClass(day, month)]),
-                    onClick: ($event) => _ctx.chooseDay(day, month)
-                  }, [
-                    createElementVNode("view", _hoisted_9, toDisplayString(day.type == "curr" ? day.day : ""), 1),
-                    _ctx.isCurrDay(month, day.day) ? (openBlock(), createElementBlock("view", _hoisted_10, "\u4ECA\u5929")) : createCommentVNode("", true),
-                    _ctx.isStartTip(day, month) ? (openBlock(), createElementBlock("view", _hoisted_11, toDisplayString("\u5F00\u59CB"))) : _ctx.isEndTip(day, month) ? (openBlock(), createElementBlock("view", _hoisted_12, toDisplayString("\u7ED3\u675F"))) : createCommentVNode("", true)
-                  ], 10, _hoisted_8);
-                }), 128))
-              ], 2)
-            ])
-          ]);
-        }), 128))
+      createElementVNode("view", _hoisted_5, [
+        createElementVNode("view", {
+          class: "viewArea",
+          ref: "viewArea",
+          style: normalizeStyle({ transform: `translateY(${_ctx.translateY}px)` })
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.compConthsData, (month, index2) => {
+            return openBlock(), createElementBlock("view", {
+              class: "calendar-month",
+              key: index2
+            }, [
+              createElementVNode("view", _hoisted_6, toDisplayString(month.title), 1),
+              createElementVNode("view", _hoisted_7, [
+                createElementVNode("view", {
+                  class: normalizeClass(["calendar-month-item", _ctx.type === "range" ? "month-item-range" : ""])
+                }, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(month.monthData, (day, i) => {
+                    return openBlock(), createElementBlock("view", {
+                      key: i,
+                      class: normalizeClass(["calendar-month-day", _ctx.getClass(day, month)]),
+                      onClick: ($event) => _ctx.chooseDay(day, month)
+                    }, [
+                      createElementVNode("view", _hoisted_9, [
+                        renderSlot(_ctx.$slots, "day", {
+                          date: day.type == "curr" ? day : ""
+                        }, () => [
+                          createTextVNode(toDisplayString(day.type == "curr" ? day.day : ""), 1)
+                        ])
+                      ]),
+                      _ctx.topInfo ? (openBlock(), createElementBlock("view", _hoisted_10, [
+                        renderSlot(_ctx.$slots, "topInfo", {
+                          date: day.type == "curr" ? day : ""
+                        })
+                      ])) : createCommentVNode("", true),
+                      _ctx.bottomInfo ? (openBlock(), createElementBlock("view", _hoisted_11, [
+                        renderSlot(_ctx.$slots, "bottomInfo", {
+                          date: day.type == "curr" ? day : ""
+                        })
+                      ])) : createCommentVNode("", true),
+                      !_ctx.bottomInfo && _ctx.showToday && _ctx.isCurrDay(month, day.day) ? (openBlock(), createElementBlock("view", _hoisted_12, " \u4ECA\u5929 ")) : createCommentVNode("", true),
+                      _ctx.isStartTip(day, month) ? (openBlock(), createElementBlock("view", {
+                        key: 3,
+                        class: normalizeClass(["calendar-day-tip", { "calendar-curr-tips-top": _ctx.rangeTip(day, month) }])
+                      }, toDisplayString(_ctx.startText), 3)) : createCommentVNode("", true),
+                      _ctx.isEndTip(day, month) ? (openBlock(), createElementBlock("view", _hoisted_13, toDisplayString(_ctx.endText), 1)) : createCommentVNode("", true)
+                    ], 10, _hoisted_8);
+                  }), 128))
+                ], 2)
+              ])
+            ]);
+          }), 128))
+        ], 4)
       ], 512)
     ], 544),
-    _ctx.poppable && !_ctx.isAutoBackFill ? (openBlock(), createElementBlock("view", _hoisted_13, [
+    _ctx.poppable && !_ctx.isAutoBackFill ? (openBlock(), createElementBlock("view", _hoisted_14, [
       createElementVNode("view", {
         class: "calendar-confirm-btn",
-        onClick: _cache[3] || (_cache[3] = (...args) => _ctx.confirm && _ctx.confirm(...args))
-      }, "\u786E\u5B9A")
+        onClick: _cache[1] || (_cache[1] = (...args) => _ctx.confirm && _ctx.confirm(...args))
+      }, toDisplayString(_ctx.confirmText), 1)
     ])) : createCommentVNode("", true)
   ], 2);
 }
@@ -608,16 +705,40 @@ const _sfc_main = create({
       type: Boolean,
       default: true
     },
+    showTitle: {
+      type: Boolean,
+      default: true
+    },
+    showSubTitle: {
+      type: Boolean,
+      default: true
+    },
     visible: {
       type: Boolean,
       default: false
     },
+    showToday: {
+      type: Boolean,
+      default: true
+    },
     title: {
       type: String,
       default: "\u65E5\u5386\u9009\u62E9"
     },
+    confirmText: {
+      type: String,
+      default: "\u786E\u8BA4"
+    },
+    startText: {
+      type: String,
+      default: "\u5F00\u59CB"
+    },
+    endText: {
+      type: String,
+      default: "\u7ED3\u675F"
+    },
     defaultValue: {
-      type: String
+      type: [String, Array]
     },
     startDate: {
       type: String,
@@ -628,8 +749,20 @@ const _sfc_main = create({
       default: Utils.getDay(365)
     }
   },
-  emits: ["choose", "close", "update:visible"],
-  setup(props, { emit }) {
+  emits: ["choose", "close", "update:visible", "select"],
+  setup(props, { emit, slots }) {
+    const showTopBtn = computed(() => {
+      return slots.btn;
+    });
+    const topInfo = computed(() => {
+      return slots.topInfo;
+    });
+    const dayInfo = computed(() => {
+      return slots.day;
+    });
+    const bottomInfo = computed(() => {
+      return slots.bottomInfo;
+    });
     const calendarRef = ref(null);
     const update = () => {
       emit("update:visible", false);
@@ -642,6 +775,9 @@ const _sfc_main = create({
       close();
       emit("choose", param);
     };
+    const select = (param) => {
+      emit("select", param);
+    };
     const closePopup = () => {
       close();
     };
@@ -650,7 +786,12 @@ const _sfc_main = create({
       update,
       close,
       choose,
-      calendarRef
+      select,
+      calendarRef,
+      showTopBtn,
+      topInfo,
+      dayInfo,
+      bottomInfo
     };
   }
 });
@@ -664,37 +805,115 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     round: "",
     closeable: true,
     onClickOverlay: _ctx.closePopup,
-    onClickCloseIcon: _ctx.closePopup
+    onClickCloseIcon: _ctx.closePopup,
+    "destroy-on-close": true,
+    style: { height: "85vh" }
   }, {
     default: withCtx(() => [
-      createVNode(_component_nut_calendar_item, {
+      _ctx.visible ? (openBlock(), createBlock(_component_nut_calendar_item, {
+        key: 0,
         props: "",
         ref: "calendarRef",
         type: _ctx.type,
         "is-auto-back-fill": _ctx.isAutoBackFill,
         poppable: _ctx.poppable,
         title: _ctx.title,
+        "confirm-text": _ctx.confirmText,
+        "start-text": _ctx.startText,
+        "end-text": _ctx.endText,
         "default-value": _ctx.defaultValue,
+        "show-today": _ctx.showToday,
         "start-date": _ctx.startDate,
         "end-date": _ctx.endDate,
         onUpdate: _ctx.update,
         onClose: _ctx.close,
-        onChoose: _ctx.choose
-      }, null, 8, ["type", "is-auto-back-fill", "poppable", "title", "default-value", "start-date", "end-date", "onUpdate", "onClose", "onChoose"])
+        onChoose: _ctx.choose,
+        onSelect: _ctx.select,
+        "show-title": _ctx.showTitle,
+        "show-sub-title": _ctx.showSubTitle
+      }, createSlots({ _: 2 }, [
+        _ctx.showTopBtn ? {
+          name: "btn",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "btn")
+          ])
+        } : void 0,
+        _ctx.dayInfo ? {
+          name: "day",
+          fn: withCtx((date) => [
+            renderSlot(_ctx.$slots, "day", {
+              date: date.date
+            })
+          ])
+        } : void 0,
+        _ctx.topInfo ? {
+          name: "topInfo",
+          fn: withCtx((date) => [
+            renderSlot(_ctx.$slots, "topInfo", {
+              date: date.date
+            })
+          ])
+        } : void 0,
+        _ctx.bottomInfo ? {
+          name: "bottomInfo",
+          fn: withCtx((date) => [
+            renderSlot(_ctx.$slots, "bottomInfo", {
+              date: date.date
+            })
+          ])
+        } : void 0
+      ]), 1032, ["type", "is-auto-back-fill", "poppable", "title", "confirm-text", "start-text", "end-text", "default-value", "show-today", "start-date", "end-date", "onUpdate", "onClose", "onChoose", "onSelect", "show-title", "show-sub-title"])) : createCommentVNode("", true)
     ]),
-    _: 1
+    _: 3
   }, 8, ["visible", "onClickOverlay", "onClickCloseIcon"])) : (openBlock(), createBlock(_component_nut_calendar_item, {
     key: 1,
     type: _ctx.type,
     "is-auto-back-fill": _ctx.isAutoBackFill,
     poppable: _ctx.poppable,
     title: _ctx.title,
+    "confirm-text": _ctx.confirmText,
+    "start-text": _ctx.startText,
+    "end-text": _ctx.endText,
     "default-value": _ctx.defaultValue,
     "start-date": _ctx.startDate,
     "end-date": _ctx.endDate,
     onClose: _ctx.close,
-    onChoose: _ctx.choose
-  }, null, 8, ["type", "is-auto-back-fill", "poppable", "title", "default-value", "start-date", "end-date", "onClose", "onChoose"]));
+    onChoose: _ctx.choose,
+    onSelect: _ctx.select,
+    "show-title": _ctx.showTitle,
+    "show-sub-title": _ctx.showSubTitle
+  }, createSlots({ _: 2 }, [
+    _ctx.showTopBtn ? {
+      name: "btn",
+      fn: withCtx(() => [
+        renderSlot(_ctx.$slots, "btn")
+      ])
+    } : void 0,
+    _ctx.dayInfo ? {
+      name: "day",
+      fn: withCtx((date) => [
+        renderSlot(_ctx.$slots, "day", {
+          date: date.date
+        })
+      ])
+    } : void 0,
+    _ctx.topInfo ? {
+      name: "topInfo",
+      fn: withCtx((date) => [
+        renderSlot(_ctx.$slots, "topInfo", {
+          date: date.date
+        })
+      ])
+    } : void 0,
+    _ctx.bottomInfo ? {
+      name: "bottomInfo",
+      fn: withCtx((date) => [
+        renderSlot(_ctx.$slots, "bottomInfo", {
+          date: date.date
+        })
+      ])
+    } : void 0
+  ]), 1032, ["type", "is-auto-back-fill", "poppable", "title", "confirm-text", "start-text", "end-text", "default-value", "start-date", "end-date", "onClose", "onChoose", "onSelect", "show-title", "show-sub-title"]));
 }
 var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export { index as default };