zartui 3.0.7 → 3.0.9

package/es/calendar/CalendarMonth.mjs

@@ -1,6 +1,6 @@
 import { createVNode as _createVNode } from "vue";
 import { ref, computed, defineComponent } from "vue";
-import { pick, addUnit, numericProp, setScrollTop, createNamespace, makeRequiredProp } from "../utils/index.mjs";
+import { pick, addUnit, numericProp, setScrollTop, createNamespace, makeRequiredProp, makeStringProp } from "../utils/index.mjs";
 import { t, bem, compareDay, getPrevDay, getNextDay, formatMonthTitle } from "./utils.mjs";
 import { useRect, useToggle } from "@zartui/use";
 import { useExpose } from "../composables/use-expose.mjs";
@@ -9,10 +9,11 @@ import CalendarDay from "./CalendarDay.mjs";
 const [name] = 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,
@@ -21,7 +22,8 @@ const calendarMonthProps = {
   allowSameDay: Boolean,
   showSubtitle: Boolean,
   showMonthTitle: Boolean,
-  firstDayOfWeek: Number
+  firstDayOfWeek: Number,
+  disabledDate: Function
 };
 var stdin_default = defineComponent({
   name,
@@ -48,6 +50,7 @@ var stdin_default = defineComponent({
     const totalDay = computed(() => getMonthEndDay(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)) {
@@ -92,18 +95,22 @@ var stdin_default = 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") {
@@ -144,6 +151,22 @@ var stdin_default = defineComponent({
       const days2 = [];
       const year = props.date.getFullYear();
       const month = props.date.getMonth();
+      if (props.showType && props.showType === "inline") {
+        for (let day = offset.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);
@@ -158,6 +181,23 @@ var stdin_default = 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"));
@@ -185,6 +225,7 @@ var stdin_default = defineComponent({
     }, [(shouldRender.value ? days : placeholders).value.map(renderDay)]);
     useExpose({
       getTitle,
+      getDate,
       getHeight: () => height.value,
       setVisible,
       scrollToDate,

package/es/calendar/index.css

@@ -1 +1 @@
-:root{--zt-calendar-background: var(--zt-background-2);--zt-calendar-popup-height: 80%;--zt-calendar-body-box-shadow: inset 0 4px 8px 0 var(--zt-gray-a1);--zt-calendar-header-title-height: 44px;--zt-calendar-header-title-font-size: var(--zt-font-size-md);--zt-calendar-header-subtitle-font-size: var(--zt-font-size-md);--zt-calendar-weekdays-height: 30px;--zt-calendar-weekdays-font-size: var(--zt-font-size-sm);--zt-calendar-weekdays-font-color: var(----zt-gray-default);--zt-calendar-weekdays-background: var(--zt-calendar-background);--zt-calendar-month-title-font-size: var(--zt-font-size-md);--zt-calendar-month-mark-color: rgba(242, 243, 245, .8);--zt-calendar-month-mark-font-size: 160px;--zt-calendar-day-height: 14.285vw;--zt-calendar-day-height-half: 7.143vw;--zt-calendar-day-font-size: var(--zt-font-size-lg);--zt-calendar-day-margin-bottom: 4px;--zt-calendar-range-edge-color: var(--zt-white);--zt-calendar-range-edge-background: var(--zt-primary-color);--zt-calendar-range-middle-color: var(--zt-primary-color);--zt-calendar-range-middle-background-opacity: .1;--zt-calendar-selected-day-size: var(--zt-calendar-day-height);--zt-calendar-selected-day-color: var(--zt-white);--zt-calendar-info-font-size: var(--zt-font-size-xs);--zt-calendar-info-line-height: var(--zt-line-height-xs);--zt-calendar-selected-day-background: var(--zt-primary-color);--zt-calendar-day-disabled-color: var(--zt-text-color-3);--zt-calendar-confirm-button-height: 36px;--zt-calendar-confirm-button-margin: 7px 0;--zt-calendar-header-title-color: var(--zt-gray-a4)}.zt-calendar{display:flex;flex-direction:column;height:100%;background:var(--zt-calendar-background);color:var(--zt-gray-default)}.zt-calendar__popup.zt-popup--top,.zt-calendar__popup.zt-popup--bottom{height:var(--zt-calendar-popup-height)}.zt-calendar__popup.zt-popup--left,.zt-calendar__popup.zt-popup--right{height:100%}.zt-calendar__header{flex-shrink:0}.zt-calendar__month-title,.zt-calendar__header-title,.zt-calendar__header-subtitle{color:var(--zt-text-color);height:var(--zt-calendar-header-title-height);line-height:var(--zt-calendar-header-title-height);text-align:center}.zt-calendar__header-title{font-size:var(--zt-calendar-header-title-font-size);color:var(--zt-calendar-header-title-color);position:relative;display:flex;justify-content:center;align-items:center}.zt-calendar__header-title:after{top:var(--zt-calendar-header-title-height);content:"";position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-calendar__header-subtitle{font-size:var(--zt-calendar-header-subtitle-font-size)}.zt-calendar__month-title{font-size:var(--zt-calendar-month-title-font-size)}.zt-calendar__weekdays{display:flex;background-color:rgba(0,0,0,.02)}.zt-calendar__weekday{flex:1;font-size:var(--zt-calendar-weekdays-font-size);line-height:var(--zt-calendar-weekdays-height);font-weight:var(--zt-font-bold);text-align:center;background:var(--zt-calendar-weekdays-background);color:var(--zt-calendar-weekdays-font-color)}.zt-calendar__body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;background-color:var(--zt-calendar-background);box-shadow:var(--zt-calendar-body-box-shadow)}.zt-calendar__days{position:relative;display:flex;flex-wrap:wrap;-webkit-user-select:none;user-select:none}.zt-calendar__day,.zt-calendar__selected-day{display:flex;align-items:center;justify-content:center;text-align:center}.zt-calendar__day{position:relative;width:14.285%;height:var(--zt-calendar-day-height);margin-bottom:var(--zt-calendar-day-margin-bottom);font-size:var(--zt-calendar-day-font-size);cursor:pointer;outline:none}.zt-calendar__day--end,.zt-calendar__day--start,.zt-calendar__day--start-end,.zt-calendar__day--multiple-middle,.zt-calendar__day--multiple-selected{color:var(--zt-calendar-range-edge-color);background:var(--zt-calendar-range-edge-background);box-shadow:0 0 0 3px rgba(0,145,250,.1)}.zt-calendar__day--start{border-radius:var(--zt-calendar-day-height-half) 0 0 var(--zt-calendar-day-height-half);border-right:none}.zt-calendar__day--end{border-radius:0 var(--zt-calendar-day-height-half) var(--zt-calendar-day-height-half) 0;border-left:none}.zt-calendar__day--start-end,.zt-calendar__day--multiple-selected{border-radius:var(--zt-calendar-day-height-half)}.zt-calendar__day--middle{color:var(--zt-calendar-range-middle-color)}.zt-calendar__day--middle:after{position:absolute;top:0;right:0;bottom:0;left:0;background-color:currentColor;opacity:var(--zt-calendar-range-middle-background-opacity);content:""}.zt-calendar__day--disabled{color:var(--zt-calendar-day-disabled-color);cursor:default}.zt-calendar__selected-day{font-weight:var(--zt-font-bold);width:var(--zt-calendar-selected-day-size);height:var(--zt-calendar-selected-day-size);color:var(--zt-calendar-selected-day-color);background:var(--zt-calendar-selected-day-background);border-radius:calc(var(--zt-calendar-selected-day-size) / 2);box-shadow:0 0 0 3px rgba(0,145,250,.1)}.zt-calendar__footer{flex-shrink:0;display:flex;padding:8px 16px;border-top:1px solid rgba(45,75,115,.1)}.zt-calendar__footer--unfit{padding-bottom:0}.zt-theme-dark{--zt-calendar-header-title-color: var(--zt-gray-a6);--zt-calendar-range-middle-color: none;--zt-calendar-weekdays-font-color: rgba(255, 255, 255, .8);--zt-calendar-weekdays-background: rgba(255, 255, 255, .04);--zt-calendar-month-mark-color: rgba(100, 101, 102, .2);--zt-calendar-day-disabled-color: rgba(255, 255, 255, .3)}
+:root{--zt-calendar-background: var(--zt-background-2);--zt-calendar-popup-height: 80%;--zt-calendar-body-box-shadow: inset 0 4px 8px 0 var(--zt-gray-a1);--zt-calendar-header-title-height: 44px;--zt-calendar-header-title-font-size: var(--zt-font-size-md);--zt-calendar-header-subtitle-font-size: var(--zt-font-size-md);--zt-calendar-weekdays-height: 30px;--zt-calendar-weekdays-font-size: var(--zt-font-size-sm);--zt-calendar-weekdays-font-color: var(----zt-gray-default);--zt-calendar-weekdays-background: var(--zt-calendar-background);--zt-calendar-month-title-font-size: var(--zt-font-size-md);--zt-calendar-month-mark-color: rgba(242, 243, 245, .8);--zt-calendar-month-mark-font-size: 160px;--zt-calendar-day-height: 14.285vw;--zt-calendar-day-height-half: 7.143vw;--zt-calendar-day-font-size: var(--zt-font-size-lg);--zt-calendar-day-margin-bottom: 4px;--zt-calendar-range-edge-color: var(--zt-white);--zt-calendar-range-edge-background: var(--zt-primary-color);--zt-calendar-range-middle-color: var(--zt-primary-color);--zt-calendar-range-middle-background-opacity: .1;--zt-calendar-selected-day-size: var(--zt-calendar-day-height);--zt-calendar-selected-day-color: var(--zt-white);--zt-calendar-info-font-size: var(--zt-font-size-xs);--zt-calendar-info-line-height: var(--zt-line-height-xs);--zt-calendar-selected-day-background: var(--zt-primary-color);--zt-calendar-day-disabled-color: var(--zt-gray-a2);--zt-calendar-confirm-button-height: 36px;--zt-calendar-confirm-button-margin: 7px 0;--zt-calendar-header-title-color: var(--zt-gray-a4)}.zt-calendar{display:flex;flex-direction:column;height:100%;background:var(--zt-calendar-background);color:var(--zt-text-color)}.zt-calendar__popup.zt-popup--top,.zt-calendar__popup.zt-popup--bottom{height:var(--zt-calendar-popup-height)}.zt-calendar__popup.zt-popup--left,.zt-calendar__popup.zt-popup--right{height:100%}.zt-calendar__header{flex-shrink:0}.zt-calendar__month-title,.zt-calendar__header-title,.zt-calendar__header-subtitle{display:flex;padding:0 16px;color:var(--zt-text-color);height:var(--zt-calendar-header-title-height);line-height:var(--zt-calendar-header-title-height);text-align:center;align-items:center;justify-content:center}.zt-calendar__month-title--opt,.zt-calendar__header-title--opt,.zt-calendar__header-subtitle--opt{width:32px;height:32px;line-height:32px;border-radius:50%;padding:0;margin:0 8px}.zt-calendar__month-title--right,.zt-calendar__header-title--right,.zt-calendar__header-subtitle--right{transform:rotate(180deg)}.zt-calendar__month-title--unenable,.zt-calendar__header-title--unenable,.zt-calendar__header-subtitle--unenable{opacity:.2}.zt-calendar__month-title--enable,.zt-calendar__header-title--enable,.zt-calendar__header-subtitle--enable{opacity:1}.zt-calendar__month-title--enable:active,.zt-calendar__header-title--enable:active,.zt-calendar__header-subtitle--enable:active{border-radius:50%;background-color:var(--zt-gray-a1);opacity:.6}.zt-calendar__month-title-text,.zt-calendar__header-title-text,.zt-calendar__header-subtitle-text{flex-grow:1}.zt-calendar__header-title{font-size:var(--zt-calendar-header-title-font-size);color:var(--zt-calendar-header-title-color);position:relative;display:flex;justify-content:center;align-items:center}.zt-calendar__header-title:after{top:var(--zt-calendar-header-title-height);content:"";position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-calendar__header-subtitle{font-size:var(--zt-calendar-header-subtitle-font-size)}.zt-calendar__month-title{font-size:var(--zt-calendar-month-title-font-size)}.zt-calendar__weekdays{display:flex;background-color:rgba(0,0,0,.02)}.zt-calendar__weekday{flex:1;font-size:var(--zt-calendar-weekdays-font-size);line-height:var(--zt-calendar-weekdays-height);font-weight:var(--zt-font-bold);text-align:center;background:var(--zt-calendar-weekdays-background);color:var(--zt-calendar-weekdays-font-color)}.zt-calendar__body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;background-color:var(--zt-calendar-background);box-shadow:var(--zt-calendar-body-box-shadow)}.zt-calendar__days{position:relative;display:flex;flex-wrap:wrap;-webkit-user-select:none;user-select:none}.zt-calendar__day,.zt-calendar__selected-day{display:flex;align-items:center;justify-content:center;text-align:center}.zt-calendar__day{position:relative;width:14.285%;height:var(--zt-calendar-day-height);margin-bottom:var(--zt-calendar-day-margin-bottom);font-size:var(--zt-calendar-day-font-size);cursor:pointer;outline:none}.zt-calendar__day--end,.zt-calendar__day--start,.zt-calendar__day--start-end,.zt-calendar__day--multiple-middle,.zt-calendar__day--multiple-selected{color:var(--zt-calendar-range-edge-color);background:var(--zt-calendar-range-edge-background);box-shadow:0 0 0 3px rgba(0,145,250,.1)}.zt-calendar__day--start{border-radius:var(--zt-calendar-day-height-half) 0 0 var(--zt-calendar-day-height-half);border-right:none}.zt-calendar__day--end{border-radius:0 var(--zt-calendar-day-height-half) var(--zt-calendar-day-height-half) 0;border-left:none}.zt-calendar__day--start-end,.zt-calendar__day--multiple-selected{border-radius:var(--zt-calendar-day-height-half)}.zt-calendar__day--middle{color:var(--zt-calendar-range-middle-color)}.zt-calendar__day--middle:after{position:absolute;top:0;right:0;bottom:0;left:0;background-color:currentColor;opacity:var(--zt-calendar-range-middle-background-opacity);content:""}.zt-calendar__day--disabled,.zt-calendar__day--preview{color:var(--zt-calendar-day-disabled-color);cursor:default}.zt-calendar__selected-day{font-weight:var(--zt-font-bold);width:var(--zt-calendar-selected-day-size);height:var(--zt-calendar-selected-day-size);color:var(--zt-calendar-selected-day-color);background:var(--zt-calendar-selected-day-background);border-radius:calc(var(--zt-calendar-selected-day-size) / 2);box-shadow:0 0 0 3px rgba(0,145,250,.1)}.zt-calendar__footer{flex-shrink:0;display:flex;padding:8px 16px;border-top:1px solid rgba(45,75,115,.1)}.zt-calendar__footer--unfit{padding-bottom:0}.zt-theme-dark{--zt-calendar-header-title-color: var(--zt-gray-a6);--zt-calendar-range-middle-color: none;--zt-calendar-weekdays-font-color: rgba(255, 255, 255, .8);--zt-calendar-weekdays-background: rgba(255, 255, 255, .04);--zt-calendar-month-mark-color: rgba(100, 101, 102, .2);--zt-calendar-day-disabled-color: rgba(255, 255, 255, .3)}

package/es/calendar/index.d.ts

@@ -1,5 +1,9 @@
 export declare const Calendar: import("../utils").WithInstall<import("vue").DefineComponent<{
     show: BooleanConstructor;
+    showType: {
+        type: import("vue").PropType<import("./types").CalendarShowType>;
+        default: import("./types").CalendarShowType;
+    };
     type: {
         type: import("vue").PropType<import("./types").CalendarType>;
         default: import("./types").CalendarType;
@@ -71,23 +75,20 @@ export declare const Calendar: import("../utils").WithInstall<import("vue").Defi
         type: BooleanConstructor;
         default: true;
     };
-    minDate: {
-        type: DateConstructor;
-        validator: (val: unknown) => val is Date;
-        default: () => Date;
-    };
-    maxDate: {
-        type: DateConstructor;
-        validator: (val: unknown) => val is Date;
-        default: () => Date;
-    };
+    minDate: DateConstructor;
+    maxDate: DateConstructor;
     firstDayOfWeek: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
         validator: (val: number) => boolean;
     };
+    disabledDate: import("vue").PropType<(date: Date) => boolean>;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "update:show" | "cancel" | "clickSubtitle" | "confirm" | "unselect" | "monthShow" | "overRange")[], "select" | "update:show" | "cancel" | "clickSubtitle" | "confirm" | "unselect" | "monthShow" | "overRange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     show: BooleanConstructor;
+    showType: {
+        type: import("vue").PropType<import("./types").CalendarShowType>;
+        default: import("./types").CalendarShowType;
+    };
     type: {
         type: import("vue").PropType<import("./types").CalendarType>;
         default: import("./types").CalendarType;
@@ -159,21 +160,14 @@ export declare const Calendar: import("../utils").WithInstall<import("vue").Defi
         type: BooleanConstructor;
         default: true;
     };
-    minDate: {
-        type: DateConstructor;
-        validator: (val: unknown) => val is Date;
-        default: () => Date;
-    };
-    maxDate: {
-        type: DateConstructor;
-        validator: (val: unknown) => val is Date;
-        default: () => Date;
-    };
+    minDate: DateConstructor;
+    maxDate: DateConstructor;
     firstDayOfWeek: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
         validator: (val: number) => boolean;
     };
+    disabledDate: import("vue").PropType<(date: Date) => boolean>;
 }>> & {
     onSelect?: ((...args: any[]) => any) | undefined;
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
@@ -195,6 +189,7 @@ export declare const Calendar: import("../utils").WithInstall<import("vue").Defi
     safeAreaInsetTop: boolean;
     safeAreaInsetBottom: boolean;
     popup: boolean;
+    showType: import("./types").CalendarShowType;
     maxRange: string | number;
     showMark: boolean;
     showTitle: boolean;
@@ -202,8 +197,6 @@ export declare const Calendar: import("../utils").WithInstall<import("vue").Defi
     allowSameDay: boolean;
     showSubtitle: boolean;
     showRangePrompt: boolean;
-    minDate: Date;
-    maxDate: Date;
     firstDayOfWeek: string | number;
 }>>;
 export default Calendar;

package/es/calendar/types.d.ts

@@ -2,8 +2,9 @@ import type { ComponentPublicInstance, ComputedRef, Ref } from 'vue';
 import type { Numeric } from '../utils';
 import type { CalendarProps } from './Calendar';
 import type { CalendarMonthProps } from './CalendarMonth';
+export declare type CalendarShowType = 'inline' | 'scroll';
 export declare type CalendarType = 'single' | 'range' | 'multiple';
-export declare type CalendarDayType = '' | 'start' | 'start-end' | 'middle' | 'end' | 'selected' | 'multiple-middle' | 'multiple-selected' | 'disabled' | 'placeholder';
+export declare type CalendarDayType = '' | 'start' | 'start-end' | 'middle' | 'end' | 'selected' | 'multiple-middle' | 'multiple-selected' | 'disabled' | 'placeholder' | 'preview';
 export declare type CalendarDayItem = {
     date?: Date;
     text?: Numeric;
@@ -21,6 +22,7 @@ export declare type CalendarInstance = ComponentPublicInstance<CalendarProps, Ca
 export declare type CalendarMonthInstance = ComponentPublicInstance<CalendarMonthProps, {
     showed?: boolean;
     getTitle: () => string;
+    getDate: () => Date;
     getHeight: () => number;
     setVisible: (value?: boolean | undefined) => void;
     scrollToDate: (body: Element, targetDate: Date) => void;

package/es/calendar/utils.d.ts

@@ -5,8 +5,11 @@ export declare function compareMonth(date1: Date, date2: Date): 0 | 1 | -1;
 export declare function compareDay(day1: Date, day2: Date): 0 | 1 | -1;
 export declare const cloneDate: (date: Date) => Date;
 export declare const cloneDates: (dates: Date | Date[]) => Date | Date[];
-export declare function getDayByOffset(date: Date, offset: number): Date;
+export declare function getDayByOffset(date: Date, offset: number, isMonth?: boolean, isYear?: boolean): Date;
 export declare const getPrevDay: (date: Date) => Date;
 export declare const getNextDay: (date: Date) => Date;
 export declare const getToday: () => Date;
+export declare const getPrevDate: (date: Date, isMonth: boolean, isYear: boolean) => Date;
+export declare const getNextDate: (date: Date, isMonth: boolean, isYear: boolean) => Date;
 export declare function calcDateNum(date: [Date, Date]): number;
+export declare function getFirstDate(date: Date): Date;

package/es/calendar/utils.mjs

@@ -1,6 +1,7 @@
 import { createNamespace } from "../utils/index.mjs";
+const monthsOfYear = 12;
 const [name, bem, t] = createNamespace("calendar");
-const formatMonthTitle = (date) => t("vanCalendar.monthTitle", date.getFullYear(), date.getMonth() + 1);
+const formatMonthTitle = (date) => t("ztCalendar.monthTitle", date.getFullYear(), date.getMonth() + 1);
 function compareMonth(date1, date2) {
   const year1 = date1.getFullYear();
   const year2 = date2.getFullYear();
@@ -22,9 +23,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, offset) {
+function getDayByOffset(date, offset, isMonth, isYear) {
   const cloned = cloneDate(date);
-  cloned.setDate(cloned.getDate() + offset);
+  if (isYear) {
+    cloned.setFullYear(cloned.getFullYear() + offset);
+  } else if (isMonth) {
+    cloned.setMonth(cloned.getMonth() + offset);
+    const multiplier = cloned.getFullYear() - date.getFullYear();
+    const setLastDate = date.getMonth() + offset !== cloned.getMonth() + multiplier * monthsOfYear;
+    if (setLastDate) {
+      cloned.setDate(0);
+    }
+  } else {
+    cloned.setDate(cloned.getDate() + offset);
+  }
   return cloned;
 }
 const getPrevDay = (date) => getDayByOffset(date, -1);
@@ -34,11 +46,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);
+}
 export {
   bem,
   calcDateNum,
@@ -48,7 +65,10 @@ export {
   compareMonth,
   formatMonthTitle,
   getDayByOffset,
+  getFirstDate,
+  getNextDate,
   getNextDay,
+  getPrevDate,
   getPrevDay,
   getToday,
   name,

package/es/cascader/Cascader.mjs

@@ -188,7 +188,7 @@ var stdin_default = defineComponent({
         options,
         selected
       } = tab;
-      const placeholder = props.placeholder || t("vanCascader.select");
+      const placeholder = props.placeholder || t("ztCascader.select");
       const title = selected ? selected[textKey] : placeholder;
       return _createVNode(Tab, {
         "title": title,

package/es/dialog/Dialog.d.ts

@@ -27,6 +27,7 @@ export declare const dialogProps: {
     };
 } & {
     title: StringConstructor;
+    primaryHeader: BooleanConstructor;
     theme: PropType<DialogTheme>;
     width: (NumberConstructor | StringConstructor)[];
     message: PropType<DialogMessage>;
@@ -83,6 +84,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 } & {
     title: StringConstructor;
+    primaryHeader: BooleanConstructor;
     theme: PropType<DialogTheme>;
     width: (NumberConstructor | StringConstructor)[];
     message: PropType<DialogMessage>;
@@ -137,6 +139,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 } & {
     title: StringConstructor;
+    primaryHeader: BooleanConstructor;
     theme: PropType<DialogTheme>;
     width: (NumberConstructor | StringConstructor)[];
     message: PropType<DialogMessage>;
@@ -179,6 +182,7 @@ declare const _default: import("vue").DefineComponent<{
     transition: string;
     closeOnPopstate: boolean;
     allowHtml: boolean;
+    primaryHeader: boolean;
     showCancelButton: boolean;
     cancelButtonDisabled: boolean;
     confirmButtonDisabled: boolean;

package/es/dialog/Dialog.mjs

@@ -7,6 +7,7 @@ import { Button } from "../button/index.mjs";
 const [name, bem, t] = createNamespace("dialog");
 const dialogProps = extend({}, popupSharedProps, {
   title: String,
+  primaryHeader: Boolean,
   theme: String,
   width: numericProp,
   message: [String, Function],
@@ -84,12 +85,21 @@ var stdin_default = defineComponent({
     const renderTitle = () => {
       const title = slots.title ? slots.title() : props.title;
       if (title) {
-        return _createVNode("div", {
-          "class": bem("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("header", {
+              isolated: !props.message && !slots.default,
+              "custom-title": !!slots.title,
+              primary: props.primaryHeader
+            })
+          }, [title])
+        );
       }
     };
     const renderMessage = (hasTitle) => {
@@ -98,10 +108,15 @@ var stdin_default = defineComponent({
         allowHtml,
         messageAlign
       } = props;
-      const classNames = bem("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("message", mods);
       const content = isFunction(message) ? message() : message;
       if (allowHtml && typeof content === "string") {
         return _createVNode("div", {

package/es/dialog/index.css

@@ -1 +1 @@
-:root{--zt-dialog-width: 350px;--zt-dialog-max-width: 90%;--zt-dialog-font-size: var(--zt-font-size-lg);--zt-dialog-transition: var(--zt-duration-base);--zt-dialog-radius: 12px;--zt-dialog-background: var(--zt-background-2);--zt-dialog-header-font-weight: var(--zt-font-bold);--zt-dialog-header-line-height: 24px;--zt-dialog-header-padding-top: 24px;--zt-dialog-header-isolated-padding: var(--zt-padding-lg) 0;--zt-dialog-message-padding: var(--zt-padding-lg) var(--zt-padding-md);--zt-dialog-message-font-size: var(--zt-font-size-lg);--zt-dialog-message-line-height: var(--zt-line-height-md);--zt-dialog-message-max-height: 60vh;--zt-dialog-has-title-message-font-size: var(--zt-font-size-md);--zt-dialog-has-title-message-text-color: var(--zt-gray-a6);--zt-dialog-has-title-message-padding-top: var(--zt-padding-xs);--zt-dialog-confirm-button-text-color: var(--zt-white);--zt-dialog-cancel-button-background-color: var(--zt-white);--zt-dialog-cancel-button-border: 0}.zt-dialog{top:45%;width:var(--zt-dialog-width);max-width:var(--zt-dialog-max-width);overflow:hidden;font-size:var(--zt-dialog-font-size);background:var(--zt-dialog-background);border-radius:var(--zt-dialog-radius);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:var(--zt-dialog-transition);transition-property:transform,opacity}.zt-dialog__header{color:var(--zt-text-color);padding-top:var(--zt-dialog-header-padding-top);font-weight:var(--zt-dialog-header-font-weight);line-height:var(--zt-dialog-header-line-height);text-align:center}.zt-dialog__header--isolated{padding:var(--zt-dialog-header-isolated-padding)}.zt-dialog__header--custom-title{padding-left:0;padding-right:0;padding-top:0}.zt-dialog__content{text-align:center;font-size:0}.zt-dialog__message{display:inline-block;color:var(--zt-gray-a8);max-height:var(--zt-dialog-message-max-height);padding:var(--zt-dialog-message-padding);overflow-y:auto;font-size:var(--zt-dialog-message-font-size);line-height:var(--zt-dialog-message-line-height);white-space:pre-wrap;text-align:left;word-wrap:break-word;-webkit-overflow-scrolling:touch}.zt-dialog__message--has-title{padding-top:var(--zt-dialog-has-title-message-padding-top);color:var(--zt-dialog-has-title-message-text-color);font-size:var(--zt-dialog-has-title-message-font-size)}.zt-dialog__message--left{text-align:left}.zt-dialog__message--right{text-align:right}.zt-dialog__message--justify{text-align:justify}.zt-dialog__footer{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none;margin:0 var(--zt-padding-xl) var(--zt-padding-lg)}.zt-dialog__confirm,.zt-dialog__cancel{flex:1;margin:0;border-width:var(--zt-dialog-cancel-button-border);background-color:var(--zt-dialog-cancel-button-background-color)}.zt-dialog__confirm,.zt-dialog__confirm:active{color:var(--zt-dialog-confirm-button-text-color)}.zt-dialog__confirm--with-cancel{margin-left:8px}.zt-dialog--round-button .zt-dialog__footer{position:relative;height:auto;padding:var(--zt-padding-xs) var(--zt-padding-lg) var(--zt-padding-md)}.zt-dialog--round-button .zt-dialog__message{padding-bottom:var(--zt-padding-md);color:var(--zt-text-color)}.zt-dialog--round-button .zt-dialog__confirm,.zt-dialog--round-button .zt-dialog__cancel{height:var(--zt-dialog-round-button-height)}.zt-dialog--round-button .zt-dialog__confirm{color:var(--zt-white)}.zt-dialog-bounce-enter-from{transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.zt-dialog-bounce-leave-active{transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}.zt-theme-dark{--zt-dialog-cancel-button-border: .5px solid rgba(255, 255, 255, .2);--zt-dialog-cancel-button-background-color: rbga(255, 255, 255, .2)}
+:root{--zt-dialog-width: 350px;--zt-dialog-max-width: 90%;--zt-dialog-font-size: var(--zt-font-size-lg);--zt-dialog-transition: var(--zt-duration-base);--zt-dialog-radius: 12px;--zt-dialog-background: var(--zt-background-2);--zt-dialog-header-font-weight: var(--zt-font-bold);--zt-dialog-header-line-height: 24px;--zt-dialog-header-padding-top: 24px;--zt-dialog-header-isolated-padding: var(--zt-padding-lg) 0;--zt-dialog-header-primary-padding: 10px;--zt-dialog-message-padding: var(--zt-padding-lg) var(--zt-padding-md);--zt-dialog-message-font-size: var(--zt-font-size-lg);--zt-dialog-message-line-height: var(--zt-line-height-md);--zt-dialog-message-max-height: 60vh;--zt-dialog-has-title-message-font-size: var(--zt-font-size-md);--zt-dialog-has-title-message-text-color: var(--zt-gray-a6);--zt-dialog-has-title-message-padding-top: var(--zt-padding-xs);--zt-dialog-has-title-message-primary-header: var(--zt-padding-lg);--zt-dialog-confirm-button-text-color: var(--zt-white);--zt-dialog-cancel-button-background-color: var(--zt-white);--zt-dialog-cancel-button-border: 0}.zt-dialog{top:45%;width:var(--zt-dialog-width);max-width:var(--zt-dialog-max-width);overflow:hidden;font-size:var(--zt-dialog-font-size);background:var(--zt-dialog-background);border-radius:var(--zt-dialog-radius);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:var(--zt-dialog-transition);transition-property:transform,opacity}.zt-dialog__header{color:var(--zt-text-color);padding-top:var(--zt-dialog-header-padding-top);font-weight:var(--zt-dialog-header-font-weight);line-height:var(--zt-dialog-header-line-height);text-align:center}.zt-dialog__header--isolated{padding:var(--zt-dialog-header-isolated-padding)}.zt-dialog__header--custom-title{padding-left:0;padding-right:0;padding-top:0}.zt-dialog__header--primary{padding:var(--zt-dialog-header-primary-padding);background:var(--zt-primary-color);color:var(--zt-white)}.zt-dialog__content{text-align:center;font-size:0}.zt-dialog__message{display:inline-block;color:var(--zt-gray-a8);max-height:var(--zt-dialog-message-max-height);padding:var(--zt-dialog-message-padding);overflow-y:auto;font-size:var(--zt-dialog-message-font-size);line-height:var(--zt-dialog-message-line-height);white-space:pre-wrap;text-align:left;word-wrap:break-word;-webkit-overflow-scrolling:touch}.zt-dialog__message--has-title{padding-top:var(--zt-dialog-has-title-message-padding-top);color:var(--zt-dialog-has-title-message-text-color);font-size:var(--zt-dialog-has-title-message-font-size)}.zt-dialog__message--primary-header{padding-top:var(--zt-dialog-has-title-message-primary-header)}.zt-dialog__message--left{text-align:left}.zt-dialog__message--right{text-align:right}.zt-dialog__message--justify{text-align:justify}.zt-dialog__footer{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none;margin:0 var(--zt-padding-xl) var(--zt-padding-lg)}.zt-dialog__confirm,.zt-dialog__cancel{flex:1;margin:0;border-width:var(--zt-dialog-cancel-button-border);background-color:var(--zt-dialog-cancel-button-background-color)}.zt-dialog__confirm,.zt-dialog__confirm:active{color:var(--zt-dialog-confirm-button-text-color)}.zt-dialog__confirm--with-cancel{margin-left:8px}.zt-dialog--round-button .zt-dialog__footer{position:relative;height:auto;padding:var(--zt-padding-xs) var(--zt-padding-lg) var(--zt-padding-md)}.zt-dialog--round-button .zt-dialog__message{padding-bottom:var(--zt-padding-md);color:var(--zt-text-color)}.zt-dialog--round-button .zt-dialog__confirm,.zt-dialog--round-button .zt-dialog__cancel{height:var(--zt-dialog-round-button-height)}.zt-dialog--round-button .zt-dialog__confirm{color:var(--zt-white)}.zt-dialog-bounce-enter-from{transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.zt-dialog-bounce-leave-active{transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}.zt-theme-dark{--zt-dialog-cancel-button-border: .5px solid rgba(255, 255, 255, .2);--zt-dialog-cancel-button-background-color: rbga(255, 255, 255, .2)}

package/es/dialog/index.d.ts

@@ -25,6 +25,7 @@ export declare const Dialog: import("../utils").WithInstall<import("vue").Define
     };
 } & {
     title: StringConstructor;
+    primaryHeader: BooleanConstructor;
     theme: import("vue").PropType<import("./types").DialogTheme>;
     width: (NumberConstructor | StringConstructor)[];
     message: import("vue").PropType<import("./types").DialogMessage>;
@@ -79,6 +80,7 @@ export declare const Dialog: import("../utils").WithInstall<import("vue").Define
     };
 } & {
     title: StringConstructor;
+    primaryHeader: BooleanConstructor;
     theme: import("vue").PropType<import("./types").DialogTheme>;
     width: (NumberConstructor | StringConstructor)[];
     message: import("vue").PropType<import("./types").DialogMessage>;
@@ -121,6 +123,7 @@ export declare const Dialog: import("../utils").WithInstall<import("vue").Define
     transition: string;
     closeOnPopstate: boolean;
     allowHtml: boolean;
+    primaryHeader: boolean;
     showCancelButton: boolean;
     cancelButtonDisabled: boolean;
     confirmButtonDisabled: boolean;

package/es/dialog/types.d.ts

@@ -6,6 +6,7 @@ export declare type DialogMessage = string | (() => JSX.Element);
 export declare type DialogMessageAlign = 'left' | 'center' | 'right' | 'justify';
 export declare type DialogOptions = {
     title?: string;
+    primaryHeader?: boolean;
     width?: Numeric;
     theme?: DialogTheme;
     message?: DialogMessage;

package/es/field/Field.d.ts

@@ -130,6 +130,7 @@ declare const fieldProps: {
     labelAlign: PropType<FieldTextAlign>;
     showWordLimit: BooleanConstructor;
     errorMessageAlign: PropType<FieldTextAlign>;
+    descriptionClass: PropType<unknown>;
     description: {
         type: PropType<string>;
         default: string;
@@ -226,6 +227,7 @@ declare const _default: import("vue").DefineComponent<{
     labelAlign: PropType<FieldTextAlign>;
     showWordLimit: BooleanConstructor;
     errorMessageAlign: PropType<FieldTextAlign>;
+    descriptionClass: PropType<unknown>;
     description: {
         type: PropType<string>;
         default: string;
@@ -320,6 +322,7 @@ declare const _default: import("vue").DefineComponent<{
     labelAlign: PropType<FieldTextAlign>;
     showWordLimit: BooleanConstructor;
     errorMessageAlign: PropType<FieldTextAlign>;
+    descriptionClass: PropType<unknown>;
     description: {
         type: PropType<string>;
         default: string;

package/es/field/Field.mjs

@@ -51,6 +51,7 @@ const fieldProps = extend({}, cellSharedProps, fieldSharedProps, {
   labelAlign: String,
   showWordLimit: Boolean,
   errorMessageAlign: String,
+  descriptionClass: unknownProp,
   description: makeStringProp(""),
   colon: {
     type: Boolean,
@@ -388,7 +389,7 @@ var stdin_default = defineComponent({
         return;
       }
       return _createVNode("div", {
-        "class": bem("description")
+        "class": [bem("description"), props.descriptionClass]
       }, [props.description]);
     };
     const showMessage = computed(() => !(form && form.props.showErrorMessage === false) && (props.errorMessage || state.validateMessage));

package/es/field/index.d.ts

@@ -85,6 +85,7 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
     labelAlign: import("vue").PropType<import("./types").FieldTextAlign>;
     showWordLimit: BooleanConstructor;
     errorMessageAlign: import("vue").PropType<import("./types").FieldTextAlign>;
+    descriptionClass: import("vue").PropType<unknown>;
     description: {
         type: import("vue").PropType<string>;
         default: string;
@@ -179,6 +180,7 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
     labelAlign: import("vue").PropType<import("./types").FieldTextAlign>;
     showWordLimit: BooleanConstructor;
     errorMessageAlign: import("vue").PropType<import("./types").FieldTextAlign>;
+    descriptionClass: import("vue").PropType<unknown>;
     description: {
         type: import("vue").PropType<string>;
         default: string;

package/es/icon/config.mjs

@@ -141,7 +141,8 @@ var stdin_default = {
     "expand",
     "turn-off",
     "reply",
-    "recall"
+    "recall",
+    "smile-plus"
   ]
 };
 export {