naive-ui 2.20.0 → 2.21.0

package/lib/date-picker/src/panel/use-calendar.d.ts

@@ -1,9 +1,9 @@
-import { ExtractPropTypes } from 'vue';
+import { ExtractPropTypes, PropType } from 'vue';
 import { Shortcuts } from '../interface';
 import type { DateItem, MonthItem, YearItem } from '../utils';
 declare const useCalendarProps: {
     readonly actions: {
-        readonly type: ArrayConstructor;
+        readonly type: PropType<string[]>;
         readonly default: () => string[];
     };
     readonly active: BooleanConstructor;
@@ -16,19 +16,19 @@ declare const useCalendarProps: {
         readonly default: "HH:mm:ss";
     };
     readonly value: {
-        readonly type: import("vue").PropType<import("../interface").Value | null>;
+        readonly type: PropType<import("../interface").Value | null>;
         readonly default: null;
     };
-    readonly shortcuts: import("vue").PropType<Shortcuts>;
+    readonly shortcuts: PropType<Shortcuts>;
     readonly onConfirm: FunctionConstructor;
-    readonly onClose: import("vue").PropType<import("../interface").OnClose>;
+    readonly onClose: PropType<import("../interface").OnClose>;
     readonly onTabOut: FunctionConstructor;
     readonly onUpdateValue: {
-        readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
+        readonly type: PropType<import("../interface").OnPanelUpdateValue>;
         readonly required: true;
     };
 };
-declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, type: 'date' | 'datetime' | 'month'): {
+declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, type: 'date' | 'datetime' | 'month' | 'year'): {
     handleDateClick: (dateItem: DateItem | MonthItem | YearItem) => void;
     handleDateInputBlur: () => void;
     handleDateInput: (value: string) => void;
@@ -134,6 +134,9 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -207,11 +210,13 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
             calendarLeftPaddingDaterange: string;
             calendarLeftPaddingDatetimerange: string;
             calendarLeftPaddingMonth: string;
+            calendarLeftPaddingYear: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
             calendarRightPaddingDatetimerange: string;
             calendarRightPaddingMonth: string;
+            calendarRightPaddingYear: string;
         };
         peers: {
             Input: import("../../../_mixins").Theme<"Input", {
@@ -288,20 +293,30 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
+                colorOpacitySecondary: number;
+                colorOpacitySecondaryHover: number;
+                colorOpacitySecondaryPressed: number;
+                colorSecondary: string;
+                colorSecondaryHover: string;
+                colorSecondaryPressed: string;
+                colorTertiary: string;
+                colorTertiaryHover: string;
+                colorTertiaryPressed: string;
+                colorQuaternary: string;
+                colorQuaternaryHover: string;
+                colorQuaternaryPressed: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
                 colorFocus: string;
                 colorDisabled: string;
                 textColor: string;
+                textColorTertiary: string;
                 textColorHover: string;
                 textColorPressed: string;
                 textColorFocus: string;
                 textColorDisabled: string;
                 textColorText: string;
-                textColorTextDepth1: string;
-                textColorTextDepth2: string;
-                textColorTextDepth3: string;
                 textColorTextHover: string;
                 textColorTextPressed: string;
                 textColorTextFocus: string;
@@ -448,9 +463,8 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
                 borderDisabledError: string;
                 rippleColorError: string;
                 waveOpacity: string;
-                fontWeightText: string;
                 fontWeight: string;
-                fontWeighGhost: string;
+                fontWeightStrong: string;
                 paddingTiny: string;
                 paddingSmall: string;
                 paddingMedium: string;
@@ -504,20 +518,30 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
                     fontSizeMedium: string;
                     fontSizeLarge: string;
                     opacityDisabled: string;
+                    colorOpacitySecondary: number;
+                    colorOpacitySecondaryHover: number;
+                    colorOpacitySecondaryPressed: number;
+                    colorSecondary: string;
+                    colorSecondaryHover: string;
+                    colorSecondaryPressed: string;
+                    colorTertiary: string;
+                    colorTertiaryHover: string;
+                    colorTertiaryPressed: string;
+                    colorQuaternary: string;
+                    colorQuaternaryHover: string;
+                    colorQuaternaryPressed: string;
                     color: string;
                     colorHover: string;
                     colorPressed: string;
                     colorFocus: string;
                     colorDisabled: string;
                     textColor: string;
+                    textColorTertiary: string;
                     textColorHover: string;
                     textColorPressed: string;
                     textColorFocus: string;
                     textColorDisabled: string;
                     textColorText: string;
-                    textColorTextDepth1: string;
-                    textColorTextDepth2: string;
-                    textColorTextDepth3: string;
                     textColorTextHover: string;
                     textColorTextPressed: string;
                     textColorTextFocus: string;
@@ -664,9 +688,8 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
                     borderDisabledError: string;
                     rippleColorError: string;
                     waveOpacity: string;
-                    fontWeightText: string;
                     fontWeight: string;
-                    fontWeighGhost: string;
+                    fontWeightStrong: string;
                     paddingTiny: string;
                     paddingSmall: string;
                     paddingMedium: string;
@@ -782,20 +805,30 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
                         fontSizeMedium: string;
                         fontSizeLarge: string;
                         opacityDisabled: string;
+                        colorOpacitySecondary: number;
+                        colorOpacitySecondaryHover: number;
+                        colorOpacitySecondaryPressed: number;
+                        colorSecondary: string;
+                        colorSecondaryHover: string;
+                        colorSecondaryPressed: string;
+                        colorTertiary: string;
+                        colorTertiaryHover: string;
+                        colorTertiaryPressed: string;
+                        colorQuaternary: string;
+                        colorQuaternaryHover: string;
+                        colorQuaternaryPressed: string;
                         color: string;
                         colorHover: string;
                         colorPressed: string;
                         colorFocus: string;
                         colorDisabled: string;
                         textColor: string;
+                        textColorTertiary: string;
                         textColorHover: string;
                         textColorPressed: string;
                         textColorFocus: string;
                         textColorDisabled: string;
                         textColorText: string;
-                        textColorTextDepth1: string;
-                        textColorTextDepth2: string;
-                        textColorTextDepth3: string;
                         textColorTextHover: string;
                         textColorTextPressed: string;
                         textColorTextFocus: string;
@@ -942,9 +975,8 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
                         borderDisabledError: string;
                         rippleColorError: string;
                         waveOpacity: string;
-                        fontWeightText: string;
                         fontWeight: string;
-                        fontWeighGhost: string;
+                        fontWeightStrong: string;
                         paddingTiny: string;
                         paddingSmall: string;
                         paddingMedium: string;
@@ -1098,7 +1130,7 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
 declare namespace useCalendar {
     var props: {
         readonly actions: {
-            readonly type: ArrayConstructor;
+            readonly type: PropType<string[]>;
             readonly default: () => string[];
         };
         readonly active: BooleanConstructor;
@@ -1111,15 +1143,15 @@ declare namespace useCalendar {
             readonly default: "HH:mm:ss";
         };
         readonly value: {
-            readonly type: import("vue").PropType<import("../interface").Value | null>;
+            readonly type: PropType<import("../interface").Value | null>;
             readonly default: null;
         };
-        readonly shortcuts: import("vue").PropType<Shortcuts>;
+        readonly shortcuts: PropType<Shortcuts>;
         readonly onConfirm: FunctionConstructor;
-        readonly onClose: import("vue").PropType<import("../interface").OnClose>;
+        readonly onClose: PropType<import("../interface").OnClose>;
         readonly onTabOut: FunctionConstructor;
         readonly onUpdateValue: {
-            readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
+            readonly type: PropType<import("../interface").OnPanelUpdateValue>;
             readonly required: true;
         };
     };

package/lib/date-picker/src/panel/use-calendar.js

@@ -77,6 +77,8 @@ function useCalendar(props, type) {
             return (0, date_fns_1.getTime)((0, date_fns_1.startOfSecond)(value));
         if (type === 'month')
             return (0, date_fns_1.getTime)((0, date_fns_1.startOfMonth)(value));
+        if (type === 'year')
+            return (0, date_fns_1.getTime)((0, date_fns_1.startOfYear)(value));
         return (0, date_fns_1.getTime)((0, date_fns_1.startOfDay)(value));
     }
     function mergedIsDateDisabled(ts) {
@@ -145,7 +147,7 @@ function useCalendar(props, type) {
             newValue = Date.now();
         }
         newValue = (0, date_fns_1.getTime)((0, date_fns_1.set)(newValue, dateItem.dateObject));
-        panelCommon.doUpdateValue(sanitizeValue(newValue), type === 'date');
+        panelCommon.doUpdateValue(sanitizeValue(newValue), type === 'date' || type === 'year');
         if (type === 'date') {
             panelCommon.doClose();
         }
@@ -153,6 +155,9 @@ function useCalendar(props, type) {
             panelCommon.disableTransitionOneTick();
             scrollYearMonth(newValue);
         }
+        else if (type === 'year') {
+            panelCommon.doClose();
+        }
     }
     function deriveDateInputValue(time) {
         // If not selected, display nothing,

package/lib/date-picker/src/panel/use-dual-calendar.d.ts

@@ -132,6 +132,9 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -205,11 +208,13 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
             calendarLeftPaddingDaterange: string;
             calendarLeftPaddingDatetimerange: string;
             calendarLeftPaddingMonth: string;
+            calendarLeftPaddingYear: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
             calendarRightPaddingDatetimerange: string;
             calendarRightPaddingMonth: string;
+            calendarRightPaddingYear: string;
         };
         peers: {
             Input: import("../../../_mixins").Theme<"Input", {
@@ -286,20 +291,30 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
+                colorOpacitySecondary: number;
+                colorOpacitySecondaryHover: number;
+                colorOpacitySecondaryPressed: number;
+                colorSecondary: string;
+                colorSecondaryHover: string;
+                colorSecondaryPressed: string;
+                colorTertiary: string;
+                colorTertiaryHover: string;
+                colorTertiaryPressed: string;
+                colorQuaternary: string;
+                colorQuaternaryHover: string;
+                colorQuaternaryPressed: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
                 colorFocus: string;
                 colorDisabled: string;
                 textColor: string;
+                textColorTertiary: string;
                 textColorHover: string;
                 textColorPressed: string;
                 textColorFocus: string;
                 textColorDisabled: string;
                 textColorText: string;
-                textColorTextDepth1: string;
-                textColorTextDepth2: string;
-                textColorTextDepth3: string;
                 textColorTextHover: string;
                 textColorTextPressed: string;
                 textColorTextFocus: string;
@@ -446,9 +461,8 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
                 borderDisabledError: string;
                 rippleColorError: string;
                 waveOpacity: string;
-                fontWeightText: string;
                 fontWeight: string;
-                fontWeighGhost: string;
+                fontWeightStrong: string;
                 paddingTiny: string;
                 paddingSmall: string;
                 paddingMedium: string;
@@ -502,20 +516,30 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
                     fontSizeMedium: string;
                     fontSizeLarge: string;
                     opacityDisabled: string;
+                    colorOpacitySecondary: number;
+                    colorOpacitySecondaryHover: number;
+                    colorOpacitySecondaryPressed: number;
+                    colorSecondary: string;
+                    colorSecondaryHover: string;
+                    colorSecondaryPressed: string;
+                    colorTertiary: string;
+                    colorTertiaryHover: string;
+                    colorTertiaryPressed: string;
+                    colorQuaternary: string;
+                    colorQuaternaryHover: string;
+                    colorQuaternaryPressed: string;
                     color: string;
                     colorHover: string;
                     colorPressed: string;
                     colorFocus: string;
                     colorDisabled: string;
                     textColor: string;
+                    textColorTertiary: string;
                     textColorHover: string;
                     textColorPressed: string;
                     textColorFocus: string;
                     textColorDisabled: string;
                     textColorText: string;
-                    textColorTextDepth1: string;
-                    textColorTextDepth2: string;
-                    textColorTextDepth3: string;
                     textColorTextHover: string;
                     textColorTextPressed: string;
                     textColorTextFocus: string;
@@ -662,9 +686,8 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
                     borderDisabledError: string;
                     rippleColorError: string;
                     waveOpacity: string;
-                    fontWeightText: string;
                     fontWeight: string;
-                    fontWeighGhost: string;
+                    fontWeightStrong: string;
                     paddingTiny: string;
                     paddingSmall: string;
                     paddingMedium: string;
@@ -780,20 +803,30 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
                         fontSizeMedium: string;
                         fontSizeLarge: string;
                         opacityDisabled: string;
+                        colorOpacitySecondary: number;
+                        colorOpacitySecondaryHover: number;
+                        colorOpacitySecondaryPressed: number;
+                        colorSecondary: string;
+                        colorSecondaryHover: string;
+                        colorSecondaryPressed: string;
+                        colorTertiary: string;
+                        colorTertiaryHover: string;
+                        colorTertiaryPressed: string;
+                        colorQuaternary: string;
+                        colorQuaternaryHover: string;
+                        colorQuaternaryPressed: string;
                         color: string;
                         colorHover: string;
                         colorPressed: string;
                         colorFocus: string;
                         colorDisabled: string;
                         textColor: string;
+                        textColorTertiary: string;
                         textColorHover: string;
                         textColorPressed: string;
                         textColorFocus: string;
                         textColorDisabled: string;
                         textColorText: string;
-                        textColorTextDepth1: string;
-                        textColorTextDepth2: string;
-                        textColorTextDepth3: string;
                         textColorTextHover: string;
                         textColorTextPressed: string;
                         textColorTextFocus: string;
@@ -940,9 +973,8 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
                         borderDisabledError: string;
                         rippleColorError: string;
                         waveOpacity: string;
-                        fontWeightText: string;
                         fontWeight: string;
-                        fontWeighGhost: string;
+                        fontWeightStrong: string;
                         paddingTiny: string;
                         paddingSmall: string;
                         paddingMedium: string;

package/lib/date-picker/src/panel/use-panel-common.d.ts

@@ -98,6 +98,9 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -171,11 +174,13 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
             calendarLeftPaddingDaterange: string;
             calendarLeftPaddingDatetimerange: string;
             calendarLeftPaddingMonth: string;
+            calendarLeftPaddingYear: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
             calendarRightPaddingDatetimerange: string;
             calendarRightPaddingMonth: string;
+            calendarRightPaddingYear: string;
         };
         peers: {
             Input: import("../../../_mixins").Theme<"Input", {
@@ -252,20 +257,30 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
+                colorOpacitySecondary: number;
+                colorOpacitySecondaryHover: number;
+                colorOpacitySecondaryPressed: number;
+                colorSecondary: string;
+                colorSecondaryHover: string;
+                colorSecondaryPressed: string;
+                colorTertiary: string;
+                colorTertiaryHover: string;
+                colorTertiaryPressed: string;
+                colorQuaternary: string;
+                colorQuaternaryHover: string;
+                colorQuaternaryPressed: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
                 colorFocus: string;
                 colorDisabled: string;
                 textColor: string;
+                textColorTertiary: string;
                 textColorHover: string;
                 textColorPressed: string;
                 textColorFocus: string;
                 textColorDisabled: string;
                 textColorText: string;
-                textColorTextDepth1: string;
-                textColorTextDepth2: string;
-                textColorTextDepth3: string;
                 textColorTextHover: string;
                 textColorTextPressed: string;
                 textColorTextFocus: string;
@@ -412,9 +427,8 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
                 borderDisabledError: string;
                 rippleColorError: string;
                 waveOpacity: string;
-                fontWeightText: string;
                 fontWeight: string;
-                fontWeighGhost: string;
+                fontWeightStrong: string;
                 paddingTiny: string;
                 paddingSmall: string;
                 paddingMedium: string;
@@ -468,20 +482,30 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
                     fontSizeMedium: string;
                     fontSizeLarge: string;
                     opacityDisabled: string;
+                    colorOpacitySecondary: number;
+                    colorOpacitySecondaryHover: number;
+                    colorOpacitySecondaryPressed: number;
+                    colorSecondary: string;
+                    colorSecondaryHover: string;
+                    colorSecondaryPressed: string;
+                    colorTertiary: string;
+                    colorTertiaryHover: string;
+                    colorTertiaryPressed: string;
+                    colorQuaternary: string;
+                    colorQuaternaryHover: string;
+                    colorQuaternaryPressed: string;
                     color: string;
                     colorHover: string;
                     colorPressed: string;
                     colorFocus: string;
                     colorDisabled: string;
                     textColor: string;
+                    textColorTertiary: string;
                     textColorHover: string;
                     textColorPressed: string;
                     textColorFocus: string;
                     textColorDisabled: string;
                     textColorText: string;
-                    textColorTextDepth1: string;
-                    textColorTextDepth2: string;
-                    textColorTextDepth3: string;
                     textColorTextHover: string;
                     textColorTextPressed: string;
                     textColorTextFocus: string;
@@ -628,9 +652,8 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
                     borderDisabledError: string;
                     rippleColorError: string;
                     waveOpacity: string;
-                    fontWeightText: string;
                     fontWeight: string;
-                    fontWeighGhost: string;
+                    fontWeightStrong: string;
                     paddingTiny: string;
                     paddingSmall: string;
                     paddingMedium: string;
@@ -746,20 +769,30 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
                         fontSizeMedium: string;
                         fontSizeLarge: string;
                         opacityDisabled: string;
+                        colorOpacitySecondary: number;
+                        colorOpacitySecondaryHover: number;
+                        colorOpacitySecondaryPressed: number;
+                        colorSecondary: string;
+                        colorSecondaryHover: string;
+                        colorSecondaryPressed: string;
+                        colorTertiary: string;
+                        colorTertiaryHover: string;
+                        colorTertiaryPressed: string;
+                        colorQuaternary: string;
+                        colorQuaternaryHover: string;
+                        colorQuaternaryPressed: string;
                         color: string;
                         colorHover: string;
                         colorPressed: string;
                         colorFocus: string;
                         colorDisabled: string;
                         textColor: string;
+                        textColorTertiary: string;
                         textColorHover: string;
                         textColorPressed: string;
                         textColorFocus: string;
                         textColorDisabled: string;
                         textColorText: string;
-                        textColorTextDepth1: string;
-                        textColorTextDepth2: string;
-                        textColorTextDepth3: string;
                         textColorTextHover: string;
                         textColorTextPressed: string;
                         textColorTextFocus: string;
@@ -906,9 +939,8 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
                         borderDisabledError: string;
                         rippleColorError: string;
                         waveOpacity: string;
-                        fontWeightText: string;
                         fontWeight: string;
-                        fontWeighGhost: string;
+                        fontWeightStrong: string;
                         paddingTiny: string;
                         paddingSmall: string;
                         paddingMedium: string;

package/lib/date-picker/styles/_common.d.ts

@@ -17,10 +17,12 @@ declare const _default: {
     calendarLeftPaddingDaterange: string;
     calendarLeftPaddingDatetimerange: string;
     calendarLeftPaddingMonth: string;
+    calendarLeftPaddingYear: string;
     calendarRightPaddingDate: string;
     calendarRightPaddingDatetime: string;
     calendarRightPaddingDaterange: string;
     calendarRightPaddingDatetimerange: string;
     calendarRightPaddingMonth: string;
+    calendarRightPaddingYear: string;
 };
 export default _default;

package/lib/date-picker/styles/_common.js

@@ -20,9 +20,11 @@ exports.default = {
     calendarLeftPaddingDaterange: '6px 12px 4px 12px',
     calendarLeftPaddingDatetimerange: '4px 12px',
     calendarLeftPaddingMonth: '0',
+    calendarLeftPaddingYear: '0',
     calendarRightPaddingDate: '6px 12px 4px 12px',
     calendarRightPaddingDatetime: '4px 12px',
     calendarRightPaddingDaterange: '6px 12px 4px 12px',
     calendarRightPaddingDatetimerange: '4px 12px',
-    calendarRightPaddingMonth: '0'
+    calendarRightPaddingMonth: '0',
+    calendarRightPaddingYear: '0'
 };