@ibiz-template/mob-vue3-components 0.7.41-alpha.16 → 0.7.41-alpha.18

package/es/node_modules/.pnpm/vue3-hash-calendar@1.1.3_vue@3.5.22/node_modules/vue3-hash-calendar/es/CalendarDate.mjs

@@ -0,0 +1,794 @@
+import { defineComponent, ref, reactive, computed, nextTick, watch, createVNode } from 'vue';
+import stdin_default$1 from './language/index.mjs';
+import './hooks/index.mjs';
+import './utils/index.mjs';
+import { makeStringProp, truthProp, makeArrayProp, makeNumberProp, makeDateProp } from './utils/props.mjs';
+import { daysOfMonth, getDayOfWeek, transDateToYearMonthDay, compareDay, getStartEndDay, calcMiddleDay, getMinDate, getMaxDate, fillNumber, formatDate } from './utils/basic.mjs';
+import { isDateInRange } from './utils/validate.mjs';
+import { useRect } from './hooks/use-rect.mjs';
+import { useMountedOrActivated } from './hooks/use-mounted-or-activated.mjs';
+import { useExpose } from './hooks/use-expose.mjs';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const calendarDateProps = {
+  showWeekView: Boolean,
+  show: Boolean,
+  disabledWeekView: Boolean,
+  selectType: makeStringProp("single"),
+  allowSameDay: Boolean,
+  defaultDate: [Date, Array],
+  defaultYearMonth: {
+    type: Object,
+    default: {}
+  },
+  minDate: makeDateProp(null),
+  maxDate: makeDateProp(null),
+  maxRange: makeNumberProp(0),
+  markType: makeStringProp("dot"),
+  markDate: makeArrayProp(),
+  disabledDate: {
+    type: Function,
+    default: () => false
+  },
+  lang: makeStringProp("CN"),
+  scrollChangeDate: truthProp,
+  weekStart: makeStringProp("Sunday"),
+  disabledScroll: {
+    type: [Boolean, String],
+    default: () => false
+  },
+  showNotCurrentMonthDay: truthProp,
+  firstDayOfMonthClassName: makeStringProp(""),
+  todayClassName: makeStringProp(""),
+  checkedDayClassName: makeStringProp(""),
+  notCurrentMonthDayClassName: makeStringProp(""),
+  disabledClassName: makeStringProp("")
+};
+var stdin_default = defineComponent({
+  name: "CalendarDate",
+  props: calendarDateProps,
+  emits: ["height", "update:showWeekView", "click", "change", "overRange", "yearMonthChange", "slidechange", "touchstart", "touchmove", "touchend"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    let timer;
+    const weekTitleRef = ref(null);
+    const calendarRef = ref(null);
+    const calendarItemRef = reactive([]);
+    const yearOfToday = ref(new Date().getFullYear());
+    const monthOfToday = ref(new Date().getMonth());
+    const dayOfToday = ref(new Date().getDate());
+    const weekArray = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
+    const calendarWeek = ref(["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"]);
+    const calendarOfMonth = ref([]);
+    const calendarOfMonthShow = ref([]);
+    const calendarDaysTotalLength = ref(42);
+    const lastMonthYear = ref(0);
+    const lastMonth = ref(0);
+    const nextMonthYear = ref(0);
+    const nextMonth = ref(0);
+    const checkedDate = ref([]);
+    const weekStartIndex = ref(0);
+    const translateIndex = ref(0);
+    const transitionDuration = ref(0.3);
+    const touch = ref({
+      x: 0,
+      y: 0
+    });
+    const isTouching = ref(false);
+    const calendarGroupHeight = ref(0);
+    const calendarWeekTitleHeight = ref(0);
+    const calendarItemHeight = ref(0);
+    const touchStartPositionX = ref(0);
+    const touchStartPositionY = ref(0);
+    const calendarY = ref(0);
+    const selectedDayIndex = ref(0);
+    const lastWeek = ref([]);
+    const nextWeek = ref([]);
+    const isLastWeekInCurrentMonth = ref(false);
+    const isNextWeekInCurrentMonth = ref(false);
+    const markDateColorObj = ref({});
+    const markDateTypeObj = ref({});
+    const currentYearMonth = ref({
+      year: new Date().getFullYear(),
+      month: new Date().getMonth()
+    });
+    calendarWeek.value = stdin_default$1[props.lang].WEEK;
+    weekStartIndex.value = weekArray.indexOf(props.weekStart.toLowerCase());
+    calendarWeek.value = [...calendarWeek.value.slice(weekStartIndex.value, calendarWeek.value.length), ...calendarWeek.value.slice(0, weekStartIndex.value)];
+    const isShowWeek = computed({
+      get() {
+        return props.showWeekView;
+      },
+      set(val) {
+        emit("update:showWeekView", val);
+      }
+    });
+    const showWeek = (checkedDatetime) => {
+      if (!checkedDatetime) {
+        checkedDatetime = checkedDate.value[0];
+      }
+      const {
+        month,
+        day
+      } = checkedDatetime;
+      const daysArr = [];
+      calendarOfMonth.value[1].forEach((item) => {
+        daysArr.push(item.day);
+      });
+      let dayIndexOfMonth = daysArr.indexOf(day);
+      if (day > 15) {
+        dayIndexOfMonth = daysArr.lastIndexOf(day);
+      }
+      const indexOfLine = Math.ceil((dayIndexOfMonth + 1) / 7);
+      const lastLine = indexOfLine - 1;
+      calendarY.value = -(calendarItemHeight.value * lastLine);
+      isShowWeek.value = true;
+      calendarGroupHeight.value = calendarItemHeight.value;
+      let currentWeek = [];
+      const sliceStart = lastLine * 7;
+      const sliceEnd = sliceStart + 7;
+      isLastWeekInCurrentMonth.value = false;
+      currentWeek = calendarOfMonth.value[1].slice(sliceStart, sliceEnd);
+      currentWeek.forEach((item, index) => {
+        if (item.day === day) {
+          selectedDayIndex.value = index;
+        }
+      });
+      const firstDayOfCurrentWeek = currentWeek[0];
+      const lastDayOfCurrentWeek = currentWeek[6];
+      if (firstDayOfCurrentWeek.month !== month || firstDayOfCurrentWeek.day === 1) {
+        if (calendarOfMonth.value[0].slice(28, 35)[6].month !== month) {
+          lastWeek.value = calendarOfMonth.value[0].slice(28, 35);
+        } else {
+          lastWeek.value = calendarOfMonth.value[0].slice(21, 28);
+        }
+      } else {
+        lastWeek.value = calendarOfMonth.value[1].slice(sliceStart - 7, sliceEnd - 7);
+        if (lastWeek.value[selectedDayIndex.value] && lastWeek.value[selectedDayIndex.value].month === month) {
+          isLastWeekInCurrentMonth.value = true;
+        }
+      }
+      isNextWeekInCurrentMonth.value = false;
+      if (lastDayOfCurrentWeek.day < firstDayOfCurrentWeek.day && lastDayOfCurrentWeek.month !== month) {
+        nextWeek.value = calendarOfMonth.value[2].slice(7, 14);
+      } else if (lastDayOfCurrentWeek.day === daysOfMonth(lastDayOfCurrentWeek.year)[lastDayOfCurrentWeek.month]) {
+        nextWeek.value = calendarOfMonth.value[2].slice(0, 7);
+      } else {
+        nextWeek.value = calendarOfMonth.value[1].slice(sliceStart + 7, sliceEnd + 7);
+        if (nextWeek.value[selectedDayIndex.value].month === month) {
+          isNextWeekInCurrentMonth.value = true;
+        }
+      }
+      calendarOfMonthShow.value[0].splice(sliceStart, 7, ...lastWeek.value);
+      calendarOfMonthShow.value[2].splice(sliceStart, 7, ...nextWeek.value);
+    };
+    const isNotCurrentMonthDay = (date, index) => {
+      const dateOfCurrentShow = calendarOfMonth.value[index][15];
+      return date.year !== dateOfCurrentShow.year || date.month !== dateOfCurrentShow.month;
+    };
+    const isFirstDayOfMonth = (date, i) => date.day === 1 && !isNotCurrentMonthDay(date, i);
+    const formatDisabledDate = (date) => {
+      if (!date.day)
+        return;
+      const fDate = new Date(`${date.year}/${date.month + 1}/${date.day}`);
+      return props.disabledDate(fDate) || !isDateInRange(fDate, props.minDate, props.maxDate);
+    };
+    const calculateCalendarOfMonth = (year = new Date().getFullYear(), month = new Date().getMonth()) => {
+      const calendarOfCurrentMonth = [];
+      const lastMonthYear2 = month === 0 ? year - 1 : year;
+      const lastMonth2 = month === 0 ? 11 : month - 1;
+      const nextMonthYear2 = month === 11 ? year + 1 : year;
+      const nextMonth2 = month === 11 ? 0 : month + 1;
+      let dayOfWeek = getDayOfWeek(year, month);
+      const lastMonthDays = daysOfMonth(year)[lastMonth2];
+      if (dayOfWeek < weekStartIndex.value) {
+        dayOfWeek = 7 - weekStartIndex.value + dayOfWeek;
+      } else {
+        dayOfWeek -= weekStartIndex.value;
+      }
+      for (let i = 0; i < dayOfWeek; i++) {
+        calendarOfCurrentMonth.push({
+          year: lastMonthYear2,
+          month: lastMonth2,
+          day: props.showNotCurrentMonthDay ? lastMonthDays - (dayOfWeek - 1 - i) : 0
+        });
+      }
+      for (let i = 0; i < daysOfMonth(year)[month]; i++) {
+        calendarOfCurrentMonth.push({
+          year,
+          month,
+          day: i + 1
+        });
+      }
+      const fillDays = calendarDaysTotalLength.value - calendarOfCurrentMonth.length;
+      for (let i = 0; i < fillDays; i++) {
+        calendarOfCurrentMonth.push({
+          year: nextMonthYear2,
+          month: nextMonth2,
+          day: props.showNotCurrentMonthDay ? i + 1 : 0
+        });
+      }
+      return calendarOfCurrentMonth;
+    };
+    const calculateCalendarOfThreeMonth = (year = currentYearMonth.value.year, month = currentYearMonth.value.month) => {
+      lastMonthYear.value = month === 0 ? year - 1 : year;
+      lastMonth.value = month === 0 ? 11 : month - 1;
+      nextMonthYear.value = month === 11 ? year + 1 : year;
+      nextMonth.value = month === 11 ? 0 : month + 1;
+      const firstMonth = calculateCalendarOfMonth(lastMonthYear.value, lastMonth.value);
+      const secondMonth = calculateCalendarOfMonth(year, month);
+      const thirdMonth = calculateCalendarOfMonth(nextMonthYear.value, nextMonth.value);
+      calendarOfMonth.value = [];
+      calendarOfMonth.value.push(firstMonth, secondMonth, thirdMonth);
+      calendarOfMonthShow.value = JSON.parse(JSON.stringify(calendarOfMonth.value));
+      if (!props.scrollChangeDate)
+        return;
+      if (props.selectType === "single") {
+        let tempDate = {};
+        let {
+          day
+        } = checkedDate.value[0];
+        if (day > 30 || day > 28 && month === 1) {
+          day = daysOfMonth(year)[month];
+        }
+        tempDate = {
+          day,
+          year,
+          month
+        };
+        if (formatDisabledDate(tempDate))
+          return;
+        const {
+          year: preYear,
+          month: preMonth,
+          day: preDay
+        } = checkedDate.value[0];
+        if (preYear !== year || preMonth !== month || preDay !== day) {
+          checkedDate.value = [{
+            day: tempDate.day,
+            year,
+            month
+          }];
+        }
+      }
+    };
+    const showMonth = () => {
+      calendarY.value = 0;
+      isShowWeek.value = false;
+      calendarGroupHeight.value = calendarItemHeight.value * 6;
+      isLastWeekInCurrentMonth.value = false;
+      isNextWeekInCurrentMonth.value = false;
+      calculateCalendarOfThreeMonth();
+    };
+    const init = () => {
+      if (props.selectType === "single") {
+        const {
+          year,
+          month
+        } = checkedDate.value[0];
+        currentYearMonth.value = {
+          year,
+          month
+        };
+      }
+      nextTick(() => {
+        calendarItemHeight.value = useRect(calendarItemRef[0]).height;
+        calendarWeekTitleHeight.value = useRect(weekTitleRef).height;
+        const calendarItemGroup = calendarItemRef || [];
+        calendarItemGroup.forEach((item) => {
+          if (!item)
+            return;
+          item.style.height = `${calendarItemHeight.value}px`;
+        });
+        if (isShowWeek.value) {
+          showWeek();
+          calendarGroupHeight.value = calendarItemHeight.value;
+        } else {
+          showMonth();
+          calendarGroupHeight.value = calendarItemHeight.value * 6;
+        }
+      });
+    };
+    const today = () => {
+      const {
+        year,
+        month,
+        day
+      } = transDateToYearMonthDay(new Date());
+      if (props.selectType === "single") {
+        checkedDate.value = [{
+          year,
+          month,
+          day
+        }];
+      }
+      currentYearMonth.value = {
+        year,
+        month
+      };
+      calculateCalendarOfThreeMonth();
+      if (isShowWeek.value) {
+        setTimeout(() => {
+          isTouching.value = true;
+          if (props.selectType === "single") {
+            const date = checkedDate.value[0];
+            checkedDate.value = [__spreadProps(__spreadValues({}, date), {
+              year,
+              month
+            })];
+          }
+          showWeek();
+        }, transitionDuration.value * 1e3);
+      }
+    };
+    const getLastWeek = () => {
+      const checked = lastWeek.value[selectedDayIndex.value];
+      showWeek(checked);
+      if (formatDisabledDate(checked))
+        return;
+      if (!props.scrollChangeDate)
+        return;
+      checkedDate.value = [checked];
+    };
+    const getNextWeek = () => {
+      const checked = nextWeek.value[selectedDayIndex.value];
+      showWeek(checked);
+      if (formatDisabledDate(checked))
+        return;
+      if (!props.scrollChangeDate)
+        return;
+      checkedDate.value = [checked];
+    };
+    const getLastMonth = () => {
+      translateIndex.value += 1;
+      if (!isLastWeekInCurrentMonth.value) {
+        currentYearMonth.value = {
+          year: lastMonthYear.value,
+          month: lastMonth.value
+        };
+      }
+      calculateCalendarOfThreeMonth();
+    };
+    const getNextMonth = () => {
+      translateIndex.value -= 1;
+      if (!isNextWeekInCurrentMonth.value) {
+        currentYearMonth.value = {
+          year: nextMonthYear.value,
+          month: nextMonth.value
+        };
+      }
+      calculateCalendarOfThreeMonth();
+    };
+    const dealCheckedDate = (date) => {
+      const {
+        selectType,
+        maxRange
+      } = props;
+      const {
+        year,
+        month,
+        day
+      } = date;
+      const checked = checkedDate.value;
+      if (selectType === "single") {
+        checkedDate.value = [{
+          year,
+          month,
+          day
+        }];
+      } else if (selectType === "multiple") {
+        const existIndex = checked.findIndex((item) => compareDay(item, date) === 0);
+        if (existIndex > -1) {
+          checkedDate.value.splice(existIndex, 1);
+        } else {
+          if (maxRange && checked.length >= maxRange) {
+            emit("overRange");
+            return;
+          }
+          checkedDate.value = [...checked, date];
+        }
+      } else if (selectType === "range") {
+        date = __spreadProps(__spreadValues({}, date), {
+          type: "start"
+        });
+        if (!checked || !checked.length) {
+          checkedDate.value = [date];
+          return;
+        }
+        const [startDay, endDay] = getStartEndDay(checked);
+        if (startDay && !endDay) {
+          const compareToStart = compareDay(date, startDay);
+          if (compareToStart === 1) {
+            const dateArr = calcMiddleDay([checked[0], __spreadProps(__spreadValues({}, date), {
+              type: "end"
+            })]);
+            if (maxRange && dateArr.length > maxRange) {
+              emit("overRange");
+              return;
+            }
+            checkedDate.value = dateArr;
+          } else if (compareToStart === -1) {
+            checkedDate.value = [date];
+          } else if (props.allowSameDay) {
+            date = __spreadProps(__spreadValues({}, date), {
+              type: "start-end"
+            });
+            checkedDate.value = [date, date];
+          }
+        } else {
+          checkedDate.value = [date];
+        }
+      }
+    };
+    const clickCalendarDay = (date) => {
+      if (!date.day)
+        return;
+      if (formatDisabledDate(date))
+        return;
+      dealCheckedDate(date);
+      if (date.month === lastMonth.value && date.year === lastMonthYear.value) {
+        getLastMonth();
+      }
+      if (date.month === nextMonth.value && date.year === nextMonthYear.value) {
+        getNextMonth();
+      }
+      if (isShowWeek.value) {
+        showWeek();
+      }
+      emit("click", date);
+    };
+    const isToday = (date) => yearOfToday.value === date.year && monthOfToday.value === date.month && dayOfToday.value === date.day;
+    const isCheckedDay = (date) => {
+      if (formatDisabledDate(date))
+        return false;
+      const {
+        year,
+        month,
+        day
+      } = date;
+      return checkedDate.value.some((item) => item.year === year && item.month === month && item.day === day);
+    };
+    const isDisabledHorizontalScroll = (direc) => {
+      const minDate = getMinDate(props.minDate);
+      const maxDate = getMaxDate(props.maxDate);
+      if (isShowWeek.value) {
+        const lastWeekLastedDay = new Date(`${lastWeek.value[6].year}/${lastWeek.value[6].month + 1}/${lastWeek.value[6].day}`).getTime();
+        const nextWeekFirstDay = new Date(`${nextWeek.value[0].year}/${nextWeek.value[0].month + 1}/${nextWeek.value[0].day}`).getTime();
+        if (direc === "left" && maxDate)
+          return nextWeekFirstDay >= maxDate;
+        if (direc === "right" && minDate)
+          return lastWeekLastedDay <= minDate;
+      } else {
+        const lastMonthLastedDay = new Date(`${lastMonthYear.value}/${lastMonth.value + 1}/${daysOfMonth(lastMonthYear.value)[lastMonth.value]}`).getTime();
+        const nextMonthFirstDay = new Date(`${nextMonthYear.value}/${nextMonth.value + 1}/1`).getTime();
+        if (direc === "left" && maxDate)
+          return nextMonthFirstDay >= maxDate;
+        if (direc === "right" && minDate)
+          return lastMonthLastedDay <= minDate;
+      }
+      return false;
+    };
+    const isCanScroll = (dire) => {
+      const scrollObj = {
+        up: [true, "up", "vertical"],
+        down: [true, "down", "vertical"],
+        left: [true, "left", "horizontal"],
+        right: [true, "right", "horizontal"]
+      };
+      const checkedScrollArr = scrollObj[dire];
+      return !checkedScrollArr.some((item) => item === props.disabledScroll);
+    };
+    const setDisabledScrollDirection = () => {
+      touch.value.x < 0 && !isCanScroll("left") && (touch.value.x = 0);
+      touch.value.x > 0 && !isCanScroll("right") && (touch.value.x = 0);
+      touch.value.y < 0 && !isCanScroll("up") && (touch.value.y = 0);
+      touch.value.y > 0 && !isCanScroll("down") && (touch.value.y = 0);
+    };
+    const changeWeekView = ({
+      isNext
+    }) => {
+      if (timer)
+        timer = null;
+      timer = setTimeout(() => {
+        isTouching.value = true;
+        isNext ? getNextWeek() : getLastWeek();
+      }, transitionDuration.value * 1e3);
+    };
+    const touchStart = (event) => {
+      emit("touchstart", event);
+      touchStartPositionX.value = event.touches[0].clientX;
+      touchStartPositionY.value = event.touches[0].clientY;
+      touch.value = {
+        x: 0,
+        y: 0
+      };
+      isTouching.value = true;
+    };
+    const touchMove = (event) => {
+      emit("touchmove", event);
+      if (!props.disabledWeekView) {
+        event.stopPropagation();
+        if (event.cancelable)
+          event.preventDefault();
+      }
+      const moveX = event.touches[0].clientX - touchStartPositionX.value;
+      const moveY = event.touches[0].clientY - touchStartPositionY.value;
+      if (Math.abs(moveX) > Math.abs(moveY)) {
+        if (isDisabledHorizontalScroll(moveX < 0 ? "left" : "right"))
+          return;
+        touch.value = {
+          x: moveX / useRect(calendarRef).width,
+          y: 0
+        };
+      } else {
+        if (props.disabledWeekView)
+          return;
+        touch.value = {
+          x: 0,
+          y: moveY / useRect(calendarRef).height
+        };
+      }
+      setDisabledScrollDirection();
+    };
+    const touchEnd = (e) => {
+      emit("touchend", e);
+      isTouching.value = false;
+      if (Math.abs(touch.value.x) > Math.abs(touch.value.y) && Math.abs(touch.value.x) > 0.2) {
+        if (touch.value.x > 0) {
+          emit("slidechange", "right");
+          getLastMonth();
+          if (isShowWeek.value) {
+            changeWeekView({
+              isNext: false
+            });
+          }
+        } else if (touch.value.x < 0) {
+          emit("slidechange", "left");
+          getNextMonth();
+          if (isShowWeek.value) {
+            changeWeekView({
+              isNext: true
+            });
+          }
+        }
+      }
+      if (Math.abs(touch.value.y) > Math.abs(touch.value.x) && Math.abs(touch.value.y * useRect(calendarRef).height) > 50) {
+        if (touch.value.y > 0 && isShowWeek.value) {
+          emit("slidechange", "down");
+          showMonth();
+        } else if (touch.value.y < 0 && !isShowWeek.value) {
+          emit("slidechange", "up");
+          showWeek();
+        }
+      } else {
+        touch.value = {
+          x: 0,
+          y: 0
+        };
+      }
+    };
+    const markDateColor = (date, type) => {
+      const dateString = `${date.year}/${fillNumber(date.month + 1)}/${fillNumber(date.day)}`;
+      const markDateTypeString = markDateTypeObj.value[dateString] || "";
+      if (markDateTypeString.indexOf(type) === -1)
+        return;
+      return markDateColorObj.value[dateString];
+    };
+    const dateFormat = (dateArr) => {
+      dateArr.forEach((date, index) => {
+        dateArr[index] = formatDate(date, "YY/MM/DD");
+      });
+      return dateArr;
+    };
+    useMountedOrActivated(init);
+    watch(() => props.markDate, (val) => {
+      const objArr = [];
+      val.forEach((item) => {
+        const obj = {
+          date: [],
+          color: "#1c71fb",
+          type: props.markType
+        };
+        if (typeof item === "string" || typeof item === "number") {
+          obj.date = [item];
+        } else {
+          obj.color = item.color || "#1c71fb";
+          obj.type = item.type || props.markType;
+          obj.date = dateFormat(item.date || []);
+        }
+        objArr.push(obj);
+      });
+      markDateColorObj.value = {};
+      markDateTypeObj.value = {};
+      objArr.forEach((item) => {
+        item.date.forEach((date) => {
+          markDateColorObj.value[date] = item.color;
+          markDateTypeObj.value[date] = item.type;
+        });
+      });
+    }, {
+      deep: true,
+      immediate: true
+    });
+    watch(weekStartIndex, () => {
+      calculateCalendarOfThreeMonth();
+    });
+    watch(() => props.defaultDate, (val) => {
+      if (props.selectType === "single" && val instanceof Date) {
+        const year = val.getFullYear();
+        const month = val.getMonth();
+        currentYearMonth.value = {
+          year,
+          month
+        };
+        checkedDate.value = [transDateToYearMonthDay(val)];
+      } else if (Array.isArray(val)) {
+        const checked = val.map((item) => transDateToYearMonthDay(item));
+        if (props.selectType === "range") {
+          checkedDate.value = calcMiddleDay([__spreadProps(__spreadValues({}, checked[0]), {
+            type: "start"
+          }), __spreadProps(__spreadValues({}, checked[1]), {
+            type: "end"
+          })]);
+        } else {
+          checkedDate.value = checked;
+        }
+      }
+      calculateCalendarOfThreeMonth();
+      if (isShowWeek.value) {
+        showWeek();
+      }
+    }, {
+      immediate: true
+    });
+    watch(checkedDate, (val) => {
+      emit("change", val);
+    }, {
+      deep: true,
+      immediate: true
+    });
+    watch(() => props.show, (val) => {
+      if (val) {
+        calculateCalendarOfThreeMonth();
+        init();
+      }
+    }, {
+      immediate: true
+    });
+    watch(currentYearMonth, () => emit("yearMonthChange", currentYearMonth.value));
+    watch(isShowWeek, (val) => {
+      if (val) {
+        nextTick(() => {
+          showWeek();
+        });
+      } else {
+        nextTick(() => {
+          showMonth();
+        });
+      }
+    });
+    watch(() => props.defaultYearMonth, (val) => {
+      if (val) {
+        currentYearMonth.value = val;
+      }
+    }, {
+      immediate: true
+    });
+    watch(calendarGroupHeight, (val) => {
+      emit("height", val + calendarWeekTitleHeight.value);
+    });
+    useExpose({
+      today,
+      getLastMonth,
+      getNextMonth,
+      changeWeekView
+    });
+    const renderWeek = () => createVNode("div", {
+      "class": "calendar_week",
+      "ref": weekTitleRef
+    }, [calendarWeek.value.map((item) => createVNode("div", {
+      "class": "calendar_item",
+      "key": item
+    }, [createVNode("p", {
+      "class": "calendar_day"
+    }, [slots.week ? slots.week({
+      week: item
+    }) : item])]))]);
+    const getRangeDayClassName = (date) => {
+      if (props.selectType !== "range")
+        return "";
+      const currDate = checkedDate.value.find((item) => compareDay(item, date) === 0);
+      if (!currDate)
+        return "";
+      const {
+        type
+      } = currDate;
+      return type === "start" ? " calendar_range_checked calendar_range_start" : type === "middle" ? " calendar_range_checked calendar_range_middle" : type === "end" ? " calendar_range_checked calendar_range_end" : type === "start-end" ? " calendar_range_checked calendar_range_start-end" : "";
+    };
+    const renderDay = (date, i) => {
+      let dayEle = isFirstDayOfMonth(date, i) ? stdin_default$1[props.lang].MONTH[date.month] : date.day === 0 ? "" : date.day;
+      if (slots.day) {
+        dayEle = slots.day({
+          date,
+          extendAttr: {
+            isMarked: !!(markDateColor(date, "circle") || markDateColor(date, "dot")),
+            isDisabledDate: formatDisabledDate(date),
+            isToday: isToday(date),
+            isChecked: isCheckedDay(date),
+            isCurrentMonthDay: !isNotCurrentMonthDay(date, i),
+            isFirstDayOfMonth: isFirstDayOfMonth(date, i)
+          }
+        });
+      }
+      return createVNode("div", {
+        "class": `calendar_day ${isFirstDayOfMonth(date, i) ? props.firstDayOfMonthClassName || "calendar_first_today" : ""} ${isToday(date) ? props.todayClassName || "calendar_day_today" : ""} ${isCheckedDay(date) ? props.checkedDayClassName || "calendar_day_checked" : ""} ${isNotCurrentMonthDay(date, i) && props.showNotCurrentMonthDay ? props.notCurrentMonthDayClassName || "calendar_day_not" : ""} ${markDateColor(date, "circle") ? "calendar_mark_circle" : ""}`,
+        "style": {
+          "border-color": markDateColor(date, "circle")
+        }
+      }, [dayEle]);
+    };
+    const renderMonth = () => calendarOfMonthShow.value.map((item, i) => createVNode("li", {
+      "class": "calendar_group_li",
+      "key": i,
+      "style": {
+        transform: `translate3d(${(i - 1 + translateIndex.value + (isTouching.value ? touch.value.x : 0)) * 100}%, ${calendarY.value}px, 0)`,
+        transitionDuration: `${isTouching.value ? 0 : transitionDuration.value}s`
+      }
+    }, [item.map((date, j) => createVNode("div", {
+      "class": `calendar_item ${formatDisabledDate(date) ? props.disabledClassName || "calendar_item_disable" : ""}${getRangeDayClassName(date)}`,
+      "ref": (el) => {
+        calendarItemRef.length = 0;
+        calendarItemRef.push(el);
+      },
+      "key": i + j,
+      "onClick": () => clickCalendarDay(date)
+    }, [renderDay(date, i), createVNode("div", {
+      "style": {
+        background: markDateColor(date, "dot")
+      },
+      "class": "calendar_dot"
+    }, null)]))]));
+    const renderCalendarDate = () => createVNode("div", {
+      "class": "calendar_body",
+      "style": {
+        display: props.show ? "block" : "none"
+      }
+    }, [renderWeek(), createVNode("div", {
+      "class": "calendar_group",
+      "style": {
+        height: `${calendarGroupHeight.value}px`
+      },
+      "ref": calendarRef,
+      "onTouchstart": touchStart,
+      "onTouchmove": touchMove,
+      "onTouchend": touchEnd
+    }, [createVNode("ul", {
+      "style": {
+        transform: `translate3d(${-translateIndex.value * 100}%, 0, 0)`
+      }
+    }, [renderMonth()])])]);
+    return () => renderCalendarDate();
+  }
+});
+
+export { calendarDateProps, stdin_default as default };