zartui 3.0.7 → 3.0.9

package/lib/zartui.es.js

@@ -1724,8 +1724,9 @@ var stdin_default$1x = defineComponent({
 });
 const Button = withInstall(stdin_default$1x);
 var stdin_default$1w = Button;
+const monthsOfYear = 12;
 const [name$18, bem$15, t$6] = createNamespace("calendar");
-const formatMonthTitle = (date) => t$6("vanCalendar.monthTitle", date.getFullYear(), date.getMonth() + 1);
+const formatMonthTitle = (date) => t$6("ztCalendar.monthTitle", date.getFullYear(), date.getMonth() + 1);
 function compareMonth(date1, date2) {
   const year1 = date1.getFullYear();
   const year2 = date2.getFullYear();
@@ -1747,9 +1748,20 @@ function compareDay(day1, day2) {
 }
 const cloneDate = (date) => new Date(date);
 const cloneDates = (dates) => Array.isArray(dates) ? dates.map(cloneDate) : cloneDate(dates);
-function getDayByOffset(date, offset2) {
+function getDayByOffset(date, offset2, isMonth, isYear) {
   const cloned = cloneDate(date);
-  cloned.setDate(cloned.getDate() + offset2);
+  if (isYear) {
+    cloned.setFullYear(cloned.getFullYear() + offset2);
+  } else if (isMonth) {
+    cloned.setMonth(cloned.getMonth() + offset2);
+    const multiplier = cloned.getFullYear() - date.getFullYear();
+    const setLastDate = date.getMonth() + offset2 !== cloned.getMonth() + multiplier * monthsOfYear;
+    if (setLastDate) {
+      cloned.setDate(0);
+    }
+  } else {
+    cloned.setDate(cloned.getDate() + offset2);
+  }
   return cloned;
 }
 const getPrevDay = (date) => getDayByOffset(date, -1);
@@ -1759,11 +1771,16 @@ const getToday = () => {
   today.setHours(0, 0, 0, 0);
   return today;
 };
+const getPrevDate = (date, isMonth, isYear) => getDayByOffset(date, -1, isMonth, isYear);
+const getNextDate = (date, isMonth, isYear) => getDayByOffset(date, 1, isMonth, isYear);
 function calcDateNum(date) {
   const day1 = date[0].getTime();
   const day2 = date[1].getTime();
   return (day2 - day1) / (1e3 * 60 * 60 * 24) + 1;
 }
+function getFirstDate(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
 function useRefs() {
   const refs = ref([]);
   const cache = [];
@@ -2108,7 +2125,7 @@ var stdin_default$1u = defineComponent({
         style2.width = "100%";
         return style2;
       }
-      if (index === 0) {
+      if (index === 0 && item.text && +item.text === 1) {
         style2.marginLeft = `${100 * offset2 / 7}%`;
       }
       if (color) {
@@ -2182,10 +2199,11 @@ var stdin_default$1u = defineComponent({
 const [name$15] = createNamespace("calendar-month");
 const calendarMonthProps = {
   date: makeRequiredProp(Date),
+  showType: makeStringProp("inline"),
   type: String,
   color: String,
-  minDate: makeRequiredProp(Date),
-  maxDate: makeRequiredProp(Date),
+  minDate: Date,
+  maxDate: Date,
   showMark: Boolean,
   rowHeight: numericProp,
   formatter: Function,
@@ -2194,7 +2212,8 @@ const calendarMonthProps = {
   allowSameDay: Boolean,
   showSubtitle: Boolean,
   showMonthTitle: Boolean,
-  firstDayOfWeek: Number
+  firstDayOfWeek: Number,
+  disabledDate: Function
 };
 var stdin_default$1t = defineComponent({
   name: name$15,
@@ -2221,6 +2240,7 @@ var stdin_default$1t = defineComponent({
     const totalDay = computed(() => getMonthEndDay2(props.date.getFullYear(), props.date.getMonth() + 1));
     const shouldRender = computed(() => visible.value || !props.lazyRender);
     const getTitle = () => title.value;
+    const getDate = () => props.date;
     const getMultipleDayType = (day) => {
       const isSelected = (date) => props.currentDate.some((item) => compareDay(item, date) === 0);
       if (isSelected(day)) {
@@ -2265,18 +2285,22 @@ var stdin_default$1t = defineComponent({
       }
       return "";
     };
-    const getDayType = (day) => {
+    const getDayType = (day, defaultType) => {
       const {
         type,
         minDate,
         maxDate,
-        currentDate
+        currentDate,
+        disabledDate
       } = props;
-      if (compareDay(day, minDate) < 0 || compareDay(day, maxDate) > 0) {
+      if (minDate && compareDay(day, minDate) < 0 || maxDate && compareDay(day, maxDate) > 0 || disabledDate && disabledDate(day)) {
         return "disabled";
       }
       if (currentDate === null) {
-        return "";
+        return defaultType || "";
+      }
+      if (defaultType) {
+        return defaultType;
       }
       if (Array.isArray(currentDate)) {
         if (type === "multiple") {
@@ -2317,6 +2341,22 @@ var stdin_default$1t = defineComponent({
       const days2 = [];
       const year = props.date.getFullYear();
       const month = props.date.getMonth();
+      if (props.showType && props.showType === "inline") {
+        for (let day = offset2.value - 1; day >= 0; day--) {
+          const date = new Date(year, month, -day);
+          const type = getDayType(date, "preview");
+          let config = {
+            date,
+            type,
+            text: date.getDate(),
+            bottomInfo: getBottomInfo(type)
+          };
+          if (props.formatter) {
+            config = props.formatter(config);
+          }
+          days2.push(config);
+        }
+      }
       for (let day = 1; day <= totalDay.value; day++) {
         const date = new Date(year, month, day);
         const type = getDayType(date);
@@ -2331,6 +2371,23 @@ var stdin_default$1t = defineComponent({
         }
         days2.push(config);
       }
+      if (props.showType && props.showType === "inline" && days2 && days2.length < 42) {
+        const nextMonthsLength = days2.length;
+        for (let day = 1; day <= 42 - nextMonthsLength; day++) {
+          const date = new Date(year, month + 1, day);
+          const type = getDayType(date, "preview");
+          let config = {
+            date,
+            type,
+            text: date.getDate(),
+            bottomInfo: getBottomInfo(type)
+          };
+          if (props.formatter) {
+            config = props.formatter(config);
+          }
+          days2.push(config);
+        }
+      }
       return days2;
     });
     const disabledDays = computed(() => days.value.filter((day) => day.type === "disabled"));
@@ -2358,6 +2415,7 @@ var stdin_default$1t = defineComponent({
     }, [(shouldRender.value ? days : placeholders).value.map(renderDay)]);
     useExpose({
       getTitle,
+      getDate,
       getHeight: () => height.value,
       setVisible,
       scrollToDate,
@@ -2377,9 +2435,13 @@ var stdin_default$1s = defineComponent({
     subtitle: String,
     showTitle: Boolean,
     showSubtitle: Boolean,
-    firstDayOfWeek: makeNumberProp(1)
+    firstDayOfWeek: makeNumberProp(1),
+    yearPreEnable: Boolean,
+    monthPreEnable: Boolean,
+    yearNextEnable: Boolean,
+    monthNextEnable: Boolean
   },
-  emits: ["clickSubtitle"],
+  emits: ["clickSubtitle", "clickPreIcon", "clickNextIcon"],
   setup(props, {
     slots,
     emit
@@ -2394,13 +2456,111 @@ var stdin_default$1s = defineComponent({
       }
     };
     const onClickSubtitle = (event) => emit("clickSubtitle", event);
+    const onClickPreIcon = (isMonth, isYear) => () => {
+      if (isMonth && !props.monthPreEnable || isYear && !props.yearPreEnable) {
+        return;
+      }
+      emit("clickPreIcon", isMonth, isYear);
+    };
+    const onClickNextIcon = (isMonth, isYear) => () => {
+      if (isMonth && !props.monthNextEnable || isYear && !props.yearNextEnable) {
+        return;
+      }
+      emit("clickNextIcon", isMonth, isYear);
+    };
+    const fastForwardImg = () => createVNode("svg", {
+      "xmlns": "http://www.w3.org/2000/svg",
+      "width": "16px",
+      "height": "16px",
+      "viewBox": "0 0 16 16",
+      "version": "1.1"
+    }, [createVNode("g", {
+      "stroke": "none",
+      "stroke-width": "1",
+      "fill": "none",
+      "fill-rule": "evenodd"
+    }, [createVNode("g", {
+      "transform": "translate(-32.000000, -320.000000)",
+      "fill": "#0091FA",
+      "fill-rule": "nonzero"
+    }, [createVNode("g", {
+      "transform": "translate(0.000000, 70.000000)"
+    }, [createVNode("g", {
+      "transform": "translate(0.000000, 236.000000)"
+    }, [createVNode("g", {
+      "transform": "translate(32.000000, 12.000000)"
+    }, [createVNode("g", {
+      "transform": "translate(8.000000, 10.000000) scale(-1, 1) translate(-8.000000, -10.000000) translate(0.000000, 2.000000)"
+    }, [createVNode("g", {
+      "transform": "translate(0.500000, 2.000000)"
+    }, [createVNode("path", {
+      "d": "M6.79659726,4.25543258 L3.35183004,7.88886609 C3.14952477,8.10225141 2.77635057,8.13960837 2.51832213,7.9723052 C2.48075622,7.94794782 2.4468797,7.91993249 2.41742642,7.88886609 L-1.02734079,4.25543258 C-1.22964607,4.04204726 -1.18447352,3.73343826 -0.926445085,3.56613509 C-0.821927664,3.49836699 -0.69295109,3.46153846 -0.560138985,3.46153846 L6.32939545,3.46153846 C6.65727667,3.46153846 6.92307692,3.68135095 6.92307692,3.95250339 C6.92307692,4.06233684 6.87854337,4.16899837 6.79659726,4.25543258 Z",
+      "opacity": "0.3",
+      "transform": "translate(2.884615, 5.769231) rotate(-90.000000) translate(-2.884615, -5.769231) "
+    }, null), createVNode("path", {
+      "d": "M12.5116225,3.49853348 L7.59052644,8.94868375 C7.3015189,9.26876173 6.7684129,9.32479717 6.39980085,9.07384242 C6.34613526,9.03730635 6.29774023,8.99528335 6.25566412,8.94868375 L1.3345681,3.49853348 C1.04556056,3.1784555 1.11009277,2.715542 1.47870482,2.46458724 C1.62801542,2.3629351 1.81226767,2.30769231 2.00199925,2.30769231 L11.8441913,2.30769231 C12.3125931,2.30769231 12.6923077,2.63741103 12.6923077,3.0441397 C12.6923077,3.20888987 12.6286883,3.36888217 12.5116225,3.49853348 Z",
+      "opacity": "0.8",
+      "transform": "translate(6.923077, 5.769231) rotate(-90.000000) translate(-6.923077, -5.769231) "
+    }, null), createVNode("path", {
+      "d": "M17.1270071,3.49853348 L12.2059111,8.94868375 C11.9169035,9.26876173 11.3837975,9.32479717 11.0151855,9.07384242 C10.9615199,9.03730635 10.9131248,8.99528335 10.8710487,8.94868375 L5.94995271,3.49853348 C5.66094518,3.1784555 5.72547739,2.715542 6.09408944,2.46458724 C6.24340004,2.3629351 6.42765229,2.30769231 6.61738387,2.30769231 L16.4595759,2.30769231 C16.9279777,2.30769231 17.3076923,2.63741103 17.3076923,3.0441397 C17.3076923,3.20888987 17.2440729,3.36888217 17.1270071,3.49853348 Z",
+      "opacity": "0.8",
+      "transform": "translate(11.538462, 5.769231) rotate(-90.000000) translate(-11.538462, -5.769231) "
+    }, null)])])])])])])])]);
+    const slowForward = () => createVNode("svg", {
+      "xmlns": "http://www.w3.org/2000/svg",
+      "width": "16px",
+      "height": "16px",
+      "viewBox": "0 0 16 16",
+      "version": "1.1"
+    }, [createVNode("g", {
+      "stroke": "none",
+      "stroke-width": "1",
+      "fill": "none",
+      "fill-rule": "evenodd"
+    }, [createVNode("g", {
+      "transform": "translate(-80.000000, -320.000000)",
+      "fill": "#0091FA",
+      "fill-rule": "nonzero"
+    }, [createVNode("g", {
+      "transform": "translate(0.000000, 70.000000)"
+    }, [createVNode("g", {
+      "transform": "translate(0.000000, 236.000000)"
+    }, [createVNode("g", {
+      "transform": "translate(32.000000, 12.000000)"
+    }, [createVNode("g", {
+      "transform": "translate(56.000000, 10.000000) scale(-1, 1) translate(-56.000000, -10.000000) translate(48.000000, 2.000000)"
+    }, [createVNode("g", {
+      "transform": "translate(3.000000, 2.000000)"
+    }, [createVNode("path", {
+      "d": "M7.06846115,4.42564988 L3.48590324,8.20442073 C3.27550576,8.42634147 2.88740459,8.46519271 2.61905502,8.29119741 C2.57998647,8.26586573 2.54475489,8.23672979 2.51412348,8.20442073 L-1.06843443,4.42564988 C-1.27883191,4.20372915 -1.23185246,3.88277579 -0.963502888,3.70878049 C-0.854804771,3.63830167 -0.720669133,3.6 -0.582544544,3.6 L6.58257127,3.6 C6.92356774,3.6 7.2,3.82860498 7.2,4.11060352 C7.2,4.22483031 7.1536851,4.3357583 7.06846115,4.42564988 Z",
+      "opacity": "0.3",
+      "transform": "translate(3.000000, 6.000000) rotate(-90.000000) translate(-3.000000, -6.000000) "
+    }, null), createVNode("path", {
+      "d": "M13.0120874,3.63847482 L7.89414749,9.3066311 C7.59357966,9.6395122 7.03914942,9.69778906 6.65579288,9.43679611 C6.59998067,9.3987986 6.54964984,9.35509469 6.50589069,9.3066311 L1.38795082,3.63847482 C1.08738299,3.30559372 1.15449649,2.82416368 1.53785302,2.56317073 C1.69313604,2.4574525 1.88475838,2.4 2.08207922,2.4 L12.317959,2.4 C12.8050968,2.4 13.2,2.74290748 13.2,3.16590528 C13.2,3.33724547 13.1338359,3.50363746 13.0120874,3.63847482 Z",
+      "opacity": "0.8",
+      "transform": "translate(7.200000, 6.000000) rotate(-90.000000) translate(-7.200000, -6.000000) "
+    }, null)])])])])])])])]);
     const renderSubtitle = () => {
       if (props.showSubtitle) {
         const title = slots.subtitle ? slots.subtitle() : props.subtitle;
         return createVNode("div", {
-          "class": bem$15("header-subtitle"),
+          "class": bem$15("header-subtitle")
+        }, [createVNode("div", {
+          "class": bem$15("header-subtitle", ["opt", props.yearPreEnable ? "enable" : "unenable"]),
+          "onClick": onClickPreIcon(false, true)
+        }, [fastForwardImg()]), createVNode("div", {
+          "class": bem$15("header-subtitle", ["opt", props.monthPreEnable ? "enable" : "unenable"]),
+          "onClick": onClickPreIcon(true, false)
+        }, [slowForward()]), createVNode("label", {
+          "class": bem$15("header-subtitle-text"),
           "onClick": onClickSubtitle
-        }, [title]);
+        }, [title]), createVNode("div", {
+          "class": bem$15("header-subtitle", ["opt", "right", [props.monthNextEnable ? "enable" : "unenable"]]),
+          "onClick": onClickNextIcon(true, false)
+        }, [slowForward()]), createVNode("div", {
+          "class": bem$15("header-subtitle", ["opt", "right", [props.yearNextEnable ? "enable" : "unenable"]]),
+          "onClick": onClickNextIcon(false, true)
+        }, [fastForwardImg()])]);
       }
     };
     const renderWeekDays = () => {
@@ -2422,6 +2582,7 @@ var stdin_default$1s = defineComponent({
 });
 const calendarProps = {
   show: Boolean,
+  showType: makeStringProp("inline"),
   type: makeStringProp("single"),
   title: String,
   color: String,
@@ -2448,24 +2609,14 @@ const calendarProps = {
   closeOnClickOverlay: truthProp,
   safeAreaInsetTop: Boolean,
   safeAreaInsetBottom: truthProp,
-  minDate: {
-    type: Date,
-    validator: isDate,
-    default: getToday
-  },
-  maxDate: {
-    type: Date,
-    validator: isDate,
-    default: () => {
-      const now = getToday();
-      return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
-    }
-  },
+  minDate: Date,
+  maxDate: Date,
   firstDayOfWeek: {
     type: numericProp,
-    default: 0,
+    default: 1,
     validator: (val) => val >= 0 && val <= 6
-  }
+  },
+  disabledDate: Function
 };
 var stdin_default$1r = defineComponent({
   name: name$18,
@@ -2475,11 +2626,19 @@ var stdin_default$1r = defineComponent({
     emit,
     slots
   }) {
-    const limitDateRange = (date, minDate = props.minDate, maxDate = props.maxDate) => {
-      if (compareDay(date, minDate) === -1) {
+    const lastMinDate = computed(() => {
+      const now = new Date();
+      return props.showType !== "inline" && !props.minDate ? new Date(now.getFullYear(), now.getMonth() - 3, now.getDate()) : props.minDate;
+    });
+    const lastMaxDate = computed(() => {
+      const now = new Date();
+      return props.showType !== "inline" && !props.maxDate ? new Date(now.getFullYear(), now.getMonth() + 6, now.getDate()) : props.maxDate;
+    });
+    const limitDateRange = (date, minDate = lastMinDate.value, maxDate = lastMaxDate.value) => {
+      if (minDate && compareDay(date, minDate) === -1) {
         return minDate;
       }
-      if (compareDay(date, maxDate) === 1) {
+      if (maxDate && compareDay(date, maxDate) === 1) {
         return maxDate;
       }
       return date;
@@ -2487,10 +2646,10 @@ var stdin_default$1r = defineComponent({
     const getInitialDate = (defaultDate = props.defaultDate) => {
       const {
         type,
-        minDate,
-        maxDate,
         allowSameDay
       } = props;
+      const minDate = lastMinDate.value;
+      const maxDate = lastMaxDate.value;
       if (defaultDate === null) {
         return defaultDate;
       }
@@ -2499,8 +2658,8 @@ var stdin_default$1r = defineComponent({
         if (!Array.isArray(defaultDate)) {
           defaultDate = [];
         }
-        const start = limitDateRange(defaultDate[0] || now, minDate, allowSameDay ? maxDate : getPrevDay(maxDate));
-        const end = limitDateRange(defaultDate[1] || now, allowSameDay ? minDate : getNextDay(minDate));
+        const start = limitDateRange(defaultDate[0] || now, minDate, allowSameDay ? maxDate : maxDate && getPrevDay(maxDate));
+        const end = limitDateRange(defaultDate[1] || now, allowSameDay ? minDate : minDate && getNextDay(minDate));
         return [start, end];
       }
       if (type === "multiple") {
@@ -2514,20 +2673,40 @@ var stdin_default$1r = defineComponent({
       }
       return limitDateRange(defaultDate);
     };
+    const getInitialTitleDate = (defaultDate = props.defaultDate) => {
+      const initTitleDate = getInitialDate(defaultDate);
+      const now = getToday();
+      if (Array.isArray(initTitleDate)) {
+        return initTitleDate[0] || now;
+      } else {
+        return initTitleDate || now;
+      }
+    };
     let bodyHeight;
     const bodyRef = ref();
     const subtitle = ref("");
     const currentDate = ref(getInitialDate());
+    const titleDate = ref(getInitialTitleDate());
     const [monthRefs, setMonthRefs] = useRefs();
     const dayOffset = computed(() => props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0);
     const months = computed(() => {
+      var _a;
       const months2 = [];
-      const cursor = new Date(props.minDate);
-      cursor.setDate(1);
-      do {
-        months2.push(new Date(cursor));
-        cursor.setMonth(cursor.getMonth() + 1);
-      } while (compareMonth(cursor, props.maxDate) !== 1);
+      if (props.showType !== "inline" && lastMinDate.value && lastMaxDate.value) {
+        const cursor = new Date(lastMinDate.value);
+        cursor.setDate(1);
+        do {
+          months2.push(new Date(cursor));
+          cursor.setMonth(cursor.getMonth() + 1);
+        } while (compareMonth(cursor, lastMaxDate.value) !== 1);
+      } else if (props.showType === "inline") {
+        const temp = (_a = titleDate.value) != null ? _a : cloneDates(titleDate.value);
+        if (!Array.isArray(temp)) {
+          months2.push(getFirstDate(temp));
+        } else {
+          months2.push(getFirstDate(temp[0]));
+        }
+      }
       return months2;
     });
     const buttonDisabled = computed(() => {
@@ -2578,6 +2757,7 @@ var stdin_default$1r = defineComponent({
       });
       if (currentMonth) {
         subtitle.value = currentMonth.getTitle();
+        titleDate.value = currentMonth.getDate();
       }
     };
     const scrollToDate = (targetDate) => {
@@ -2618,6 +2798,7 @@ var stdin_default$1r = defineComponent({
     };
     const reset = (date = getInitialDate()) => {
       currentDate.value = date;
+      titleDate.value = getInitialTitleDate(date);
       scrollToCurrentDate();
     };
     const checkRange = (date) => {
@@ -2679,6 +2860,9 @@ var stdin_default$1r = defineComponent({
       const {
         type
       } = props;
+      if (item.type === "preview") {
+        titleDate.value = date;
+      }
       if (type === "range") {
         if (!currentDate.value) {
           select([date]);
@@ -2726,6 +2910,64 @@ var stdin_default$1r = defineComponent({
         select(date, true);
       }
     };
+    const yearPreEnable = computed(() => {
+      if (!lastMinDate.value) {
+        return true;
+      }
+      return titleDate.value.getFullYear() > lastMinDate.value.getFullYear();
+    });
+    const monthPreEnable = computed(() => {
+      if (!lastMinDate.value) {
+        return true;
+      }
+      const targetDate = titleDate.value;
+      const targetYearMonth = getFirstDate(targetDate);
+      const minDateYearMonth = getFirstDate(lastMinDate.value);
+      return compareDay(targetYearMonth, minDateYearMonth) === 1;
+    });
+    const yearNextEnable = computed(() => {
+      if (!lastMaxDate.value) {
+        return true;
+      }
+      return titleDate.value.getFullYear() < lastMaxDate.value.getFullYear();
+    });
+    const monthNextEnable = computed(() => {
+      if (!lastMaxDate.value) {
+        return true;
+      }
+      const targetDate = titleDate.value;
+      const targetYearMonth = getFirstDate(targetDate);
+      const maxDateYearMonth = getFirstDate(lastMaxDate.value);
+      return compareDay(maxDateYearMonth, targetYearMonth) === 1;
+    });
+    const onClickTitleIcon = (isPreFlag, isMonth, isYear) => {
+      const curTitleDate = titleDate.value;
+      if (curTitleDate) {
+        let targetDate = isPreFlag ? getPrevDate(curTitleDate, isMonth, isYear) : getNextDate(curTitleDate, isMonth, isYear);
+        if (!isDate(targetDate)) {
+          return;
+        }
+        let hasCompared = false;
+        const compareDate = isPreFlag ? lastMinDate.value : lastMaxDate.value;
+        const compareValue = isPreFlag ? 1 : -1;
+        if (compareDate && compareDay(compareDate, targetDate) === compareValue && compareMonth(compareDate, targetDate) === 0) {
+          targetDate = compareDate;
+          hasCompared = true;
+        }
+        if (hasCompared || !compareDate || compareDate && compareDay(compareDate, targetDate) !== compareValue) {
+          scrollToDate(targetDate);
+          titleDate.value = targetDate;
+        }
+      } else {
+        raf(onScroll);
+      }
+    };
+    const onClickPreIcon = (isMonth, isYear) => {
+      onClickTitleIcon(true, isMonth, isYear);
+    };
+    const onClickNextIcon = (isMonth, isYear) => {
+      onClickTitleIcon(false, isMonth, isYear);
+    };
     const updateShow = (value) => emit("update:show", value);
     const renderMonth = (date, index) => {
       const showMonthTitle = index !== 0 || !props.showSubtitle;
@@ -2735,7 +2977,7 @@ var stdin_default$1r = defineComponent({
         "currentDate": currentDate.value,
         "showMonthTitle": showMonthTitle,
         "firstDayOfWeek": dayOffset.value
-      }, pick(props, ["type", "color", "minDate", "maxDate", "showMark", "formatter", "rowHeight", "lazyRender", "showSubtitle", "allowSameDay"]), {
+      }, pick(props, ["showType", "type", "color", "minDate", "maxDate", "showMark", "formatter", "rowHeight", "lazyRender", "showSubtitle", "allowSameDay", "disabledDate"]), {
         "onClick": onClickDay
       }), pick(slots, ["top-info", "bottom-info"]));
     };
@@ -2785,7 +3027,13 @@ var stdin_default$1r = defineComponent({
       "showTitle": props.showTitle,
       "showSubtitle": props.showSubtitle,
       "firstDayOfWeek": dayOffset.value,
-      "onClickSubtitle": (event) => emit("clickSubtitle", event)
+      "onClickSubtitle": (event) => emit("clickSubtitle", event),
+      "onClickPreIcon": onClickPreIcon,
+      "onClickNextIcon": onClickNextIcon,
+      "yearPreEnable": yearPreEnable.value,
+      "monthPreEnable": monthPreEnable.value,
+      "yearNextEnable": yearNextEnable.value,
+      "monthNextEnable": monthNextEnable.value
     }, pick(slots, ["title", "subtitle"])), createVNode("div", {
       "ref": bodyRef,
       "class": bem$15("body"),
@@ -2797,6 +3045,11 @@ var stdin_default$1r = defineComponent({
       currentDate.value = value;
       scrollToCurrentDate();
     });
+    watch(titleDate, (newValue) => {
+      if (props.showType === "inline" && newValue) {
+        subtitle.value = formatMonthTitle(newValue);
+      }
+    });
     useExpose({
       reset,
       scrollToDate,
@@ -4278,7 +4531,7 @@ var stdin_default$1i = defineComponent({
         options,
         selected
       } = tab;
-      const placeholder = props.placeholder || t$5("vanCascader.select");
+      const placeholder = props.placeholder || t$5("ztCascader.select");
       const title = selected ? selected[textKey] : placeholder;
       return createVNode(Tab, {
         "title": title,
@@ -6645,6 +6898,7 @@ const DateTimePicker = withInstall(stdin_default$$);
 const [name$H, bem$I, t$3] = createNamespace("dialog");
 const dialogProps = extend({}, popupSharedProps, {
   title: String,
+  primaryHeader: Boolean,
   theme: String,
   width: numericProp,
   message: [String, Function],
@@ -6722,12 +6976,21 @@ var stdin_default$_ = defineComponent({
     const renderTitle = () => {
       const title = slots.title ? slots.title() : props.title;
       if (title) {
-        return createVNode("div", {
-          "class": bem$I("header", {
-            isolated: !props.message && !slots.default,
-            "custom-title": !!slots.title
-          })
-        }, [title]);
+        return (
+          // <div
+          //   class={bem(['header', props.titleType, {
+          //     isolated: !props.message && !slots.default,
+          //     'custom-title': !!slots.title,
+          //   }])}
+          // >
+          createVNode("div", {
+            "class": bem$I("header", {
+              isolated: !props.message && !slots.default,
+              "custom-title": !!slots.title,
+              primary: props.primaryHeader
+            })
+          }, [title])
+        );
       }
     };
     const renderMessage = (hasTitle) => {
@@ -6736,10 +6999,15 @@ var stdin_default$_ = defineComponent({
         allowHtml,
         messageAlign
       } = props;
-      const classNames = bem$I("message", {
-        "has-title": hasTitle,
+      const mods = {
         [messageAlign]: messageAlign
-      });
+      };
+      if (props.primaryHeader) {
+        mods["primary-header"] = props.primaryHeader;
+      } else if (hasTitle) {
+        mods["has-title"] = hasTitle;
+      }
+      const classNames = bem$I("message", mods);
       const content = isFunction(message) ? message() : message;
       if (allowHtml && typeof content === "string") {
         return createVNode("div", {
@@ -8458,6 +8726,7 @@ const fieldProps = extend({}, cellSharedProps, fieldSharedProps, {
   labelAlign: String,
   showWordLimit: Boolean,
   errorMessageAlign: String,
+  descriptionClass: unknownProp,
   description: makeStringProp(""),
   colon: {
     type: Boolean,
@@ -8795,7 +9064,7 @@ var stdin_default$W = defineComponent({
         return;
       }
       return createVNode("div", {
-        "class": bem$E("description")
+        "class": [bem$E("description"), props.descriptionClass]
       }, [props.description]);
     };
     const showMessage = computed(() => !(form && form.props.showErrorMessage === false) && (props.errorMessage || state.validateMessage));
@@ -13859,12 +14128,14 @@ var stdin_default$p = defineComponent({
       return __async(this, null, function* () {
         var _a;
         if (wrapperRef.value && popupRef.value && arrowRef.value) {
+          const popoverEl = popupRef.value;
+          const wrapperEl = wrapperRef.value;
           const {
             x,
             y,
             placement: realPlacement,
             middlewareData
-          } = yield computePosition(wrapperRef.value, popupRef.value, {
+          } = yield computePosition(wrapperEl, popoverEl, {
             placement: props.placement,
             middleware: [offset(8), shift({
               padding: 4,
@@ -13875,11 +14146,7 @@ var stdin_default$p = defineComponent({
               padding: 6
             })]
           });
-          Object.assign(popupRef.value.style, {
-            left: `${x}px`,
-            top: `${y}px`
-          });
-          popupRef.value.setAttribute("data-popper-placement", realPlacement);
+          let popupTop = y;
           const side = realPlacement.split("-")[0];
           const arrowSide = {
             top: "bottom",
@@ -13887,6 +14154,16 @@ var stdin_default$p = defineComponent({
             bottom: "top",
             left: "right"
           }[side];
+          if (y < 0) {
+            popupTop = 0;
+          } else if (y > 0 && y + popoverEl.offsetHeight > document.body.clientHeight) {
+            popupTop = document.body.clientHeight - popoverEl.offsetHeight;
+          }
+          Object.assign(popupRef.value.style, {
+            left: `${x}px`,
+            top: `${popupTop}px`
+          });
+          popupRef.value.setAttribute("data-popper-placement", realPlacement);
           const {
             x: arrowX,
             y: arrowY
@@ -15795,6 +16072,11 @@ var stdin_default$a = defineComponent({
   }
 });
 const TabbarItem = withInstall(stdin_default$a);
+var SortOrderEnum = /* @__PURE__ */ ((SortOrderEnum2) => {
+  SortOrderEnum2["ASCEND"] = "ascend";
+  SortOrderEnum2["DESCEND"] = "descend";
+  return SortOrderEnum2;
+})(SortOrderEnum || {});
 const [name$4, bem$4] = createNamespace("table");
 const tableProps = {
   headList: makeArrayProp(),
@@ -15817,12 +16099,42 @@ const tableProps = {
 var stdin_default$9 = defineComponent({
   name: name$4,
   props: tableProps,
-  setup(props) {
-    const fixedBoxRef = ref();
+  emits: ["sort"],
+  setup(props, {
+    emit
+  }) {
+    const sortOrder = ref("");
+    const sortKey = ref("");
     const fixedColumn = computed(() => props.headList.filter((v) => v.fixed));
+    const formatColumns = computed(() => {
+      const columns = [];
+      let left = 0;
+      props.headList.forEach((element, index) => {
+        var _a;
+        const column = Object.assign({}, element);
+        const preColumn = props.headList[index - 1];
+        const nextColumn = props.headList[index + 1];
+        if (preColumn) {
+          left += Number((_a = preColumn.width) == null ? void 0 : _a.split("px")[0]);
+          column.left = `${left}px`;
+        } else {
+          column.left = 0;
+        }
+        if (element.fixed && !nextColumn.fixed) {
+          column.lastFixLeft = true;
+        }
+        columns.push(column);
+      });
+      return columns;
+    });
+    const pingedLeft = ref(false);
     const resortHeadList = computed(() => fixedColumn.value.concat(props.headList.filter((v) => !v.fixed)));
     onMounted(() => {
       const fixedIndexList = props.headList.map((v, i) => {
+        if (v.sorter && v.defaultSortOrder) {
+          sortOrder.value = v.defaultSortOrder || "";
+          sortKey.value = v.key;
+        }
         if (v.fixed) {
           return `tableHead${i}`;
         } else {
@@ -15839,31 +16151,86 @@ var stdin_default$9 = defineComponent({
         }, 0);
       }
     });
-    const onScroll = (e) => {
-      var _a, _b, _c;
-      if (((_a = e.target) == null ? void 0 : _a.scrollLeft) > 0) {
-        (_b = fixedBoxRef.value) == null ? void 0 : _b.classList.add("shadow");
+    const getNextSortOrder = (type) => {
+      if (!type) {
+        return SortOrderEnum.ASCEND;
+      } else if (type === SortOrderEnum.ASCEND) {
+        return SortOrderEnum.DESCEND;
       } else {
-        (_c = fixedBoxRef.value) == null ? void 0 : _c.classList.remove("shadow");
+        return "";
       }
     };
-    const onClick = (data, click) => {
-      if (click) {
-        click(data);
+    const onHeaderClick = (data) => {
+      if (!data.sorter)
+        return;
+      sortOrder.value = getNextSortOrder(data.key === sortKey.value ? sortOrder.value : "");
+      sortKey.value = data.key;
+      emit("sort", {
+        order: sortOrder.value,
+        key: data.key
+      });
+    };
+    const onScroll = (event) => {
+      const {
+        scrollLeft,
+        currentTarget
+      } = event;
+      const mergedScrollLeft = typeof scrollLeft === "number" ? scrollLeft : currentTarget == null ? void 0 : currentTarget.scrollLeft;
+      pingedLeft.value = mergedScrollLeft > 0;
+    };
+    const getHead = (colData) => {
+      if ((colData == null ? void 0 : colData.colSpan) !== 0) {
+        return createVNode("th", {
+          "class": bem$4("left", {
+            fixed: colData.fixed,
+            last: colData.lastFixLeft && pingedLeft.value
+          }),
+          "style": {
+            left: colData.fixed ? colData.left : ""
+          },
+          "colspan": (colData == null ? void 0 : colData.colSpan) !== 1 ? colData == null ? void 0 : colData.colSpan : null
+        }, [createVNode("div", {
+          "class": bem$4("head"),
+          "onClick": () => onHeaderClick(colData)
+        }, [createVNode("span", {
+          "class": bem$4("head-label")
+        }, [colData.label]), colData.sorter ? createVNode("span", {
+          "class": bem$4("head-sort")
+        }, [createVNode(Icon, {
+          "class": [colData.key === sortKey.value && sortOrder.value === SortOrderEnum.ASCEND ? bem$4("sort-active") : ""],
+          "name": "spinner-shrink",
+          "size": "12",
+          "style": {
+            marginBottom: "-3px"
+          }
+        }, null), createVNode(Icon, {
+          "class": [colData.key === sortKey.value && sortOrder.value === SortOrderEnum.DESCEND ? bem$4("sort-active") : ""],
+          "name": "spinner-expand",
+          "size": "12",
+          "style": {
+            marginTop: "-3px"
+          }
+        }, null)]) : ""])]);
       }
     };
-    const getValue = (value) => value === void 0 || value === "" || value === null ? props.emptyValue : value;
-    const genColumn = (headObj, index, isFixed) => createVNode("div", {
-      "class": [bem$4(isFixed ? "fixed-head" : "head")],
-      "id": isFixed ? `fixedHead${index}` : `tableHead${index}`,
-      "style": isFixed ? "" : headObj.width ? `width:${headObj.width};` : ""
-    }, [createVNode("div", {
-      "class": [bem$4("item"), bem$4("head-item")]
-    }, [headObj.label]), props.dataList.map((data) => createVNode("div", {
-      "class": [bem$4("item"), bem$4("body")],
-      "style": headObj.style,
-      "onClick": () => onClick(data, headObj.click)
-    }, [getValue(data[headObj.key])]))]);
+    const getBody = (rowData, rowIndex) => createVNode("tr", null, [formatColumns.value.map((colData) => {
+      let additionalCellProps;
+      if (colData.customCell) {
+        additionalCellProps = colData.customCell(rowData, rowIndex);
+      }
+      const style = Object.assign({}, colData.style);
+      style.left = colData.fixed ? colData.left : "";
+      return (additionalCellProps == null ? void 0 : additionalCellProps.rowSpan) !== 0 && (additionalCellProps == null ? void 0 : additionalCellProps.colSpan) !== 0 && createVNode("td", {
+        "onClick": () => colData.click && colData.click(rowData, rowIndex),
+        "class": bem$4("left", {
+          fixed: colData.fixed,
+          last: colData.lastFixLeft && pingedLeft.value
+        }),
+        "colspan": (additionalCellProps == null ? void 0 : additionalCellProps.colSpan) !== 1 ? additionalCellProps == null ? void 0 : additionalCellProps.colSpan : null,
+        "rowspan": (additionalCellProps == null ? void 0 : additionalCellProps.rowSpan) !== 1 ? additionalCellProps == null ? void 0 : additionalCellProps.rowSpan : null,
+        "style": style
+      }, [rowData[colData.key]]);
+    })]);
     const getCol = () => {
       const cols = [];
       const col = resortHeadList.value.length;
@@ -15894,16 +16261,20 @@ var stdin_default$9 = defineComponent({
       })
     }, [getLoadingColumn()]) : createVNode("div", {
       "class": bem$4({
-        striped: props.striped,
-        "no-border": !props.border
-      })
-    }, [createVNode("div", {
-      "class": bem$4("normal-box"),
+        fixed: fixedColumn.value.length > 0,
+        bordered: props.border,
+        striped: props.striped
+      }),
       "onScroll": onScroll
-    }, [resortHeadList.value.map((x, i) => genColumn(x, i))]), createVNode("div", {
-      "class": bem$4("fixed-box"),
-      "ref": fixedBoxRef
-    }, [fixedColumn.value.map((x, i) => genColumn(x, i, true))])]);
+    }, [createVNode("table", null, [createVNode("colgroup", null, [props.headList.map((item) => createVNode("col", {
+      "style": {
+        width: item.width
+      }
+    }, null))]), createVNode("thead", {
+      "class": bem$4("thead")
+    }, [createVNode("tr", null, [formatColumns.value.map((colData) => getHead(colData))])]), createVNode("tbody", {
+      "class": bem$4("tbody")
+    }, [props.dataList.map((rowData, rowIndex) => getBody(rowData, rowIndex))])])]);
   }
 });
 const Table = withInstall(stdin_default$9);
@@ -15919,6 +16290,7 @@ const tagProps = {
   borderColor: String,
   closeable: Boolean,
   icon: String,
+  image: String,
   iconPrefix: String,
   iconColor: String,
   badge: Boolean,
@@ -15981,27 +16353,33 @@ var stdin_default$8 = defineComponent({
         "class": [bem$3("close"), HAPTICS_FEEDBACK],
         "onClick": onClose
       }, null);
-      const LeftIcon = props.icon && createVNode(Icon, {
-        "name": props.icon,
-        "class": bem$3("icon"),
-        "classPrefix": props.iconPrefix,
-        "style": {
-          color: props.iconColor
+      const LeftIcon = () => {
+        if (props.image) {
+          return createVNode(stdin_default$1z, {
+            "class": bem$3("image"),
+            "src": props.image
+          }, null);
+        } else if (props.icon) {
+          return createVNode(Icon, {
+            "name": props.icon,
+            "class": bem$3("icon"),
+            "classPrefix": props.iconPrefix,
+            "style": {
+              color: props.iconColor
+            }
+          }, null);
         }
-      }, null);
+      };
       return createVNode("span", {
         "style": getStyle(),
         "class": bem$3([classes, type])
-      }, [LeftIcon, (_a = slots.default) == null ? void 0 : _a.call(slots), CloseIcon]);
-    };
-    const getStampStyle = () => {
-      const style = {
-        color: props.color || props.textColor,
-        width: props.stampDiameter + "px",
-        height: props.stampDiameter + "px"
-      };
-      return style;
+      }, [LeftIcon(), (_a = slots.default) == null ? void 0 : _a.call(slots), CloseIcon]);
     };
+    const getStampStyle = () => ({
+      color: props.color || props.textColor,
+      width: props.stampDiameter + "px",
+      height: props.stampDiameter + "px"
+    });
     const renderStampTag = () => {
       var _a;
       const {
@@ -17752,7 +18130,7 @@ const Lazyload = {
     });
   }
 };
-const version = "3.0.7";
+const version = "3.0.9";
 function install(app) {
   const components = [
     ActionSheet,