zartui 3.0.7 → 3.0.8

package/lib/zartui.js

@@ -1996,8 +1996,9 @@
   });
   const Button = withInstall(stdin_default$1x);
   var stdin_default$1w = Button;
+  const monthsOfYear = 12;
   const [name$18, bem$15, t$7] = createNamespace("calendar");
-  const formatMonthTitle = (date) => t$7("vanCalendar.monthTitle", date.getFullYear(), date.getMonth() + 1);
+  const formatMonthTitle = (date) => t$7("ztCalendar.monthTitle", date.getFullYear(), date.getMonth() + 1);
   function compareMonth(date1, date2) {
     const year1 = date1.getFullYear();
     const year2 = date2.getFullYear();
@@ -2019,9 +2020,20 @@
   }
   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);
@@ -2031,11 +2043,16 @@
     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 = vue.ref([]);
     const cache = [];
@@ -2380,7 +2397,7 @@
           style2.width = "100%";
           return style2;
         }
-        if (index === 0) {
+        if (index === 0 && item.text && +item.text === 1) {
           style2.marginLeft = `${100 * offset2 / 7}%`;
         }
         if (color) {
@@ -2454,10 +2471,11 @@
   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,
@@ -2466,7 +2484,8 @@
     allowSameDay: Boolean,
     showSubtitle: Boolean,
     showMonthTitle: Boolean,
-    firstDayOfWeek: Number
+    firstDayOfWeek: Number,
+    disabledDate: Function
   };
   var stdin_default$1t = vue.defineComponent({
     name: name$15,
@@ -2493,6 +2512,7 @@
       const totalDay = vue.computed(() => getMonthEndDay2(props.date.getFullYear(), props.date.getMonth() + 1));
       const shouldRender = vue.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)) {
@@ -2537,18 +2557,22 @@
         }
         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") {
@@ -2589,6 +2613,22 @@
         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);
@@ -2603,6 +2643,23 @@
           }
           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 = vue.computed(() => days.value.filter((day) => day.type === "disabled"));
@@ -2630,6 +2687,7 @@
       }, [(shouldRender.value ? days : placeholders).value.map(renderDay)]);
       useExpose({
         getTitle,
+        getDate,
         getHeight: () => height2.value,
         setVisible,
         scrollToDate,
@@ -2649,9 +2707,13 @@
       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
@@ -2666,13 +2728,111 @@
         }
       };
       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 = () => vue.createVNode("svg", {
+        "xmlns": "http://www.w3.org/2000/svg",
+        "width": "16px",
+        "height": "16px",
+        "viewBox": "0 0 16 16",
+        "version": "1.1"
+      }, [vue.createVNode("g", {
+        "stroke": "none",
+        "stroke-width": "1",
+        "fill": "none",
+        "fill-rule": "evenodd"
+      }, [vue.createVNode("g", {
+        "transform": "translate(-32.000000, -320.000000)",
+        "fill": "#0091FA",
+        "fill-rule": "nonzero"
+      }, [vue.createVNode("g", {
+        "transform": "translate(0.000000, 70.000000)"
+      }, [vue.createVNode("g", {
+        "transform": "translate(0.000000, 236.000000)"
+      }, [vue.createVNode("g", {
+        "transform": "translate(32.000000, 12.000000)"
+      }, [vue.createVNode("g", {
+        "transform": "translate(8.000000, 10.000000) scale(-1, 1) translate(-8.000000, -10.000000) translate(0.000000, 2.000000)"
+      }, [vue.createVNode("g", {
+        "transform": "translate(0.500000, 2.000000)"
+      }, [vue.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), vue.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), vue.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 = () => vue.createVNode("svg", {
+        "xmlns": "http://www.w3.org/2000/svg",
+        "width": "16px",
+        "height": "16px",
+        "viewBox": "0 0 16 16",
+        "version": "1.1"
+      }, [vue.createVNode("g", {
+        "stroke": "none",
+        "stroke-width": "1",
+        "fill": "none",
+        "fill-rule": "evenodd"
+      }, [vue.createVNode("g", {
+        "transform": "translate(-80.000000, -320.000000)",
+        "fill": "#0091FA",
+        "fill-rule": "nonzero"
+      }, [vue.createVNode("g", {
+        "transform": "translate(0.000000, 70.000000)"
+      }, [vue.createVNode("g", {
+        "transform": "translate(0.000000, 236.000000)"
+      }, [vue.createVNode("g", {
+        "transform": "translate(32.000000, 12.000000)"
+      }, [vue.createVNode("g", {
+        "transform": "translate(56.000000, 10.000000) scale(-1, 1) translate(-56.000000, -10.000000) translate(48.000000, 2.000000)"
+      }, [vue.createVNode("g", {
+        "transform": "translate(3.000000, 2.000000)"
+      }, [vue.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), vue.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 vue.createVNode("div", {
-            "class": bem$15("header-subtitle"),
+            "class": bem$15("header-subtitle")
+          }, [vue.createVNode("div", {
+            "class": bem$15("header-subtitle", ["opt", props.yearPreEnable ? "enable" : "unenable"]),
+            "onClick": onClickPreIcon(false, true)
+          }, [fastForwardImg()]), vue.createVNode("div", {
+            "class": bem$15("header-subtitle", ["opt", props.monthPreEnable ? "enable" : "unenable"]),
+            "onClick": onClickPreIcon(true, false)
+          }, [slowForward()]), vue.createVNode("label", {
+            "class": bem$15("header-subtitle-text"),
             "onClick": onClickSubtitle
-          }, [title]);
+          }, [title]), vue.createVNode("div", {
+            "class": bem$15("header-subtitle", ["opt", "right", [props.monthNextEnable ? "enable" : "unenable"]]),
+            "onClick": onClickNextIcon(true, false)
+          }, [slowForward()]), vue.createVNode("div", {
+            "class": bem$15("header-subtitle", ["opt", "right", [props.yearNextEnable ? "enable" : "unenable"]]),
+            "onClick": onClickNextIcon(false, true)
+          }, [fastForwardImg()])]);
         }
       };
       const renderWeekDays = () => {
@@ -2694,6 +2854,7 @@
   });
   const calendarProps = {
     show: Boolean,
+    showType: makeStringProp("inline"),
     type: makeStringProp("single"),
     title: String,
     color: String,
@@ -2720,24 +2881,14 @@
     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 = vue.defineComponent({
     name: name$18,
@@ -2747,11 +2898,19 @@
       emit,
       slots
     }) {
-      const limitDateRange = (date, minDate = props.minDate, maxDate = props.maxDate) => {
-        if (compareDay(date, minDate) === -1) {
+      const lastMinDate = vue.computed(() => {
+        const now = new Date();
+        return props.showType !== "inline" && !props.minDate ? new Date(now.getFullYear(), now.getMonth() - 3, now.getDate()) : props.minDate;
+      });
+      const lastMaxDate = vue.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;
@@ -2759,10 +2918,10 @@
       const getInitialDate = (defaultDate = props.defaultDate) => {
         const {
           type,
-          minDate,
-          maxDate,
           allowSameDay
         } = props;
+        const minDate = lastMinDate.value;
+        const maxDate = lastMaxDate.value;
         if (defaultDate === null) {
           return defaultDate;
         }
@@ -2771,8 +2930,8 @@
           if (!Array.isArray(defaultDate)) {
             defaultDate = [];
           }
-          const start2 = limitDateRange(defaultDate[0] || now, minDate, allowSameDay ? maxDate : getPrevDay(maxDate));
-          const end2 = limitDateRange(defaultDate[1] || now, allowSameDay ? minDate : getNextDay(minDate));
+          const start2 = limitDateRange(defaultDate[0] || now, minDate, allowSameDay ? maxDate : maxDate && getPrevDay(maxDate));
+          const end2 = limitDateRange(defaultDate[1] || now, allowSameDay ? minDate : minDate && getNextDay(minDate));
           return [start2, end2];
         }
         if (type === "multiple") {
@@ -2786,20 +2945,40 @@
         }
         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 = vue.ref();
       const subtitle = vue.ref("");
       const currentDate = vue.ref(getInitialDate());
+      const titleDate = vue.ref(getInitialTitleDate());
       const [monthRefs, setMonthRefs] = useRefs();
       const dayOffset = vue.computed(() => props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0);
       const months = vue.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 = vue.computed(() => {
@@ -2850,6 +3029,7 @@
         });
         if (currentMonth) {
           subtitle.value = currentMonth.getTitle();
+          titleDate.value = currentMonth.getDate();
         }
       };
       const scrollToDate = (targetDate) => {
@@ -2890,6 +3070,7 @@
       };
       const reset = (date = getInitialDate()) => {
         currentDate.value = date;
+        titleDate.value = getInitialTitleDate(date);
         scrollToCurrentDate();
       };
       const checkRange = (date) => {
@@ -2951,6 +3132,9 @@
         const {
           type
         } = props;
+        if (item.type === "preview") {
+          titleDate.value = date;
+        }
         if (type === "range") {
           if (!currentDate.value) {
             select([date]);
@@ -2998,6 +3182,64 @@
           select(date, true);
         }
       };
+      const yearPreEnable = vue.computed(() => {
+        if (!lastMinDate.value) {
+          return true;
+        }
+        return titleDate.value.getFullYear() > lastMinDate.value.getFullYear();
+      });
+      const monthPreEnable = vue.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 = vue.computed(() => {
+        if (!lastMaxDate.value) {
+          return true;
+        }
+        return titleDate.value.getFullYear() < lastMaxDate.value.getFullYear();
+      });
+      const monthNextEnable = vue.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;
@@ -3007,7 +3249,7 @@
           "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"]));
       };
@@ -3057,7 +3299,13 @@
         "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"])), vue.createVNode("div", {
         "ref": bodyRef,
         "class": bem$15("body"),
@@ -3069,6 +3317,11 @@
         currentDate.value = value;
         scrollToCurrentDate();
       });
+      vue.watch(titleDate, (newValue) => {
+        if (props.showType === "inline" && newValue) {
+          subtitle.value = formatMonthTitle(newValue);
+        }
+      });
       useExpose({
         reset,
         scrollToDate,
@@ -4541,7 +4794,7 @@
           options,
           selected
         } = tab;
-        const placeholder = props.placeholder || t$6("vanCascader.select");
+        const placeholder = props.placeholder || t$6("ztCascader.select");
         const title = selected ? selected[textKey] : placeholder;
         return vue.createVNode(Tab, {
           "title": title,
@@ -6891,6 +7144,7 @@
   const [name$H, bem$I, t$4] = createNamespace("dialog");
   const dialogProps = extend({}, popupSharedProps, {
     title: String,
+    primaryHeader: Boolean,
     theme: String,
     width: numericProp,
     message: [String, Function],
@@ -6968,12 +7222,21 @@
       const renderTitle = () => {
         const title = slots.title ? slots.title() : props.title;
         if (title) {
-          return vue.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,
+            //   }])}
+            // >
+            vue.createVNode("div", {
+              "class": bem$I("header", {
+                isolated: !props.message && !slots.default,
+                "custom-title": !!slots.title,
+                primary: props.primaryHeader
+              })
+            }, [title])
+          );
         }
       };
       const renderMessage = (hasTitle) => {
@@ -6982,10 +7245,15 @@
           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 vue.createVNode("div", {
@@ -8701,6 +8969,7 @@
     labelAlign: String,
     showWordLimit: Boolean,
     errorMessageAlign: String,
+    descriptionClass: unknownProp,
     description: makeStringProp(""),
     colon: {
       type: Boolean,
@@ -9038,7 +9307,7 @@
           return;
         }
         return vue.createVNode("div", {
-          "class": bem$E("description")
+          "class": [bem$E("description"), props.descriptionClass]
         }, [props.description]);
       };
       const showMessage = vue.computed(() => !(form && form.props.showErrorMessage === false) && (props.errorMessage || state.validateMessage));
@@ -15599,12 +15868,14 @@
         return __async(this, null, function* () {
           var _a;
           if (wrapperRef.value && popupRef.value && arrowRef.value) {
+            const popoverEl = popupRef.value;
+            const wrapperEl = wrapperRef.value;
             const {
               x: x2,
               y: y2,
               placement: realPlacement,
               middlewareData
-            } = yield z(wrapperRef.value, popupRef.value, {
+            } = yield z(wrapperEl, popoverEl, {
               placement: props.placement,
               middleware: [D$1(8), k({
                 padding: 4,
@@ -15615,11 +15886,7 @@
                 padding: 6
               })]
             });
-            Object.assign(popupRef.value.style, {
-              left: `${x2}px`,
-              top: `${y2}px`
-            });
-            popupRef.value.setAttribute("data-popper-placement", realPlacement);
+            let popupTop = y2;
             const side = realPlacement.split("-")[0];
             const arrowSide = {
               top: "bottom",
@@ -15627,6 +15894,16 @@
               bottom: "top",
               left: "right"
             }[side];
+            if (y2 < 0) {
+              popupTop = 0;
+            } else if (y2 > 0 && y2 + popoverEl.offsetHeight > document.body.clientHeight) {
+              popupTop = document.body.clientHeight - popoverEl.offsetHeight;
+            }
+            Object.assign(popupRef.value.style, {
+              left: `${x2}px`,
+              top: `${popupTop}px`
+            });
+            popupRef.value.setAttribute("data-popper-placement", realPlacement);
             const {
               x: arrowX,
               y: arrowY
@@ -17529,6 +17806,11 @@
     }
   });
   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(),
@@ -17551,12 +17833,42 @@
   var stdin_default$9 = vue.defineComponent({
     name: name$4,
     props: tableProps,
-    setup(props) {
-      const fixedBoxRef = vue.ref();
+    emits: ["sort"],
+    setup(props, {
+      emit
+    }) {
+      const sortOrder = vue.ref("");
+      const sortKey = vue.ref("");
       const fixedColumn = vue.computed(() => props.headList.filter((v2) => v2.fixed));
+      const formatColumns = vue.computed(() => {
+        const columns = [];
+        let left2 = 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) {
+            left2 += Number((_a = preColumn.width) == null ? void 0 : _a.split("px")[0]);
+            column.left = `${left2}px`;
+          } else {
+            column.left = 0;
+          }
+          if (element.fixed && !nextColumn.fixed) {
+            column.lastFixLeft = true;
+          }
+          columns.push(column);
+        });
+        return columns;
+      });
+      const pingedLeft = vue.ref(false);
       const resortHeadList = vue.computed(() => fixedColumn.value.concat(props.headList.filter((v2) => !v2.fixed)));
       vue.onMounted(() => {
         const fixedIndexList = props.headList.map((v2, i2) => {
+          if (v2.sorter && v2.defaultSortOrder) {
+            sortOrder.value = v2.defaultSortOrder || "";
+            sortKey.value = v2.key;
+          }
           if (v2.fixed) {
             return `tableHead${i2}`;
           } else {
@@ -17573,31 +17885,86 @@
           }, 0);
         }
       });
-      const onScroll = (e2) => {
-        var _a, _b, _c;
-        if (((_a = e2.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 vue.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
+          }, [vue.createVNode("div", {
+            "class": bem$4("head"),
+            "onClick": () => onHeaderClick(colData)
+          }, [vue.createVNode("span", {
+            "class": bem$4("head-label")
+          }, [colData.label]), colData.sorter ? vue.createVNode("span", {
+            "class": bem$4("head-sort")
+          }, [vue.createVNode(Icon, {
+            "class": [colData.key === sortKey.value && sortOrder.value === SortOrderEnum.ASCEND ? bem$4("sort-active") : ""],
+            "name": "spinner-shrink",
+            "size": "12",
+            "style": {
+              marginBottom: "-3px"
+            }
+          }, null), vue.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) => vue.createVNode("div", {
-        "class": [bem$4(isFixed ? "fixed-head" : "head")],
-        "id": isFixed ? `fixedHead${index}` : `tableHead${index}`,
-        "style": isFixed ? "" : headObj.width ? `width:${headObj.width};` : ""
-      }, [vue.createVNode("div", {
-        "class": [bem$4("item"), bem$4("head-item")]
-      }, [headObj.label]), props.dataList.map((data) => vue.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) => vue.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 && vue.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;
@@ -17628,16 +17995,20 @@
         })
       }, [getLoadingColumn()]) : vue.createVNode("div", {
         "class": bem$4({
-          striped: props.striped,
-          "no-border": !props.border
-        })
-      }, [vue.createVNode("div", {
-        "class": bem$4("normal-box"),
+          fixed: fixedColumn.value.length > 0,
+          bordered: props.border,
+          striped: props.striped
+        }),
         "onScroll": onScroll
-      }, [resortHeadList.value.map((x2, i2) => genColumn(x2, i2))]), vue.createVNode("div", {
-        "class": bem$4("fixed-box"),
-        "ref": fixedBoxRef
-      }, [fixedColumn.value.map((x2, i2) => genColumn(x2, i2, true))])]);
+      }, [vue.createVNode("table", null, [vue.createVNode("colgroup", null, [props.headList.map((item) => vue.createVNode("col", {
+        "style": {
+          width: item.width
+        }
+      }, null))]), vue.createVNode("thead", {
+        "class": bem$4("thead")
+      }, [vue.createVNode("tr", null, [formatColumns.value.map((colData) => getHead(colData))])]), vue.createVNode("tbody", {
+        "class": bem$4("tbody")
+      }, [props.dataList.map((rowData, rowIndex) => getBody(rowData, rowIndex))])])]);
     }
   });
   const Table = withInstall(stdin_default$9);
@@ -17653,6 +18024,7 @@
     borderColor: String,
     closeable: Boolean,
     icon: String,
+    image: String,
     iconPrefix: String,
     iconColor: String,
     badge: Boolean,
@@ -17715,27 +18087,33 @@
           "class": [bem$3("close"), HAPTICS_FEEDBACK],
           "onClick": onClose
         }, null);
-        const LeftIcon = props.icon && vue.createVNode(Icon, {
-          "name": props.icon,
-          "class": bem$3("icon"),
-          "classPrefix": props.iconPrefix,
-          "style": {
-            color: props.iconColor
+        const LeftIcon = () => {
+          if (props.image) {
+            return vue.createVNode(stdin_default$1z, {
+              "class": bem$3("image"),
+              "src": props.image
+            }, null);
+          } else if (props.icon) {
+            return vue.createVNode(Icon, {
+              "name": props.icon,
+              "class": bem$3("icon"),
+              "classPrefix": props.iconPrefix,
+              "style": {
+                color: props.iconColor
+              }
+            }, null);
           }
-        }, null);
+        };
         return vue.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 {