@uzum-tech/ui 1.1.5 → 1.2.1

package/es/date-picker/src/panel/panelHeader.d.ts

@@ -1,4 +1,6 @@
 import { PropType } from 'vue';
+import { OnPanelUpdateValue, PanelValue } from '../interface';
+import { DateCommonItem } from '../utils';
 declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: {
         type: StringConstructor;
@@ -13,15 +15,24 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-    onUpdateValue: {
-        type: PropType<(value: number) => void>;
-        required: true;
+    isMonth: {
+        type: BooleanConstructor;
+        value: boolean;
+    };
+    isYear: {
+        type: BooleanConstructor;
+        value: boolean;
     };
+    onUpdateValue: PropType<OnPanelUpdateValue>;
+    onUpdateMonth: PropType<OnPanelUpdateValue>;
+    onUpdateYear: PropType<OnPanelUpdateValue>;
 }, {
     monthPanelIsActive: import("vue").Ref<boolean>;
     yearPanelIsActive: import("vue").Ref<boolean>;
     onUpdateMonthPanelIsActive: (value: boolean) => void;
     onUpdateYearPanelIsActive: (value: boolean) => void;
+    handleUpdateMonth: (value: PanelValue, doUpdate: boolean, item?: DateCommonItem) => void;
+    handleUpdateYear: (value: PanelValue, doUpdate: boolean, item?: DateCommonItem) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     mergedClsPrefix: {
         type: StringConstructor;
@@ -36,9 +47,19 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-    onUpdateValue: {
-        type: PropType<(value: number) => void>;
-        required: true;
+    isMonth: {
+        type: BooleanConstructor;
+        value: boolean;
+    };
+    isYear: {
+        type: BooleanConstructor;
+        value: boolean;
     };
-}>>, {}, {}>;
+    onUpdateValue: PropType<OnPanelUpdateValue>;
+    onUpdateMonth: PropType<OnPanelUpdateValue>;
+    onUpdateYear: PropType<OnPanelUpdateValue>;
+}>>, {
+    isMonth: boolean;
+    isYear: boolean;
+}, {}>;
 export default _default;

package/es/date-picker/src/panel/panelHeader.js

@@ -16,14 +16,21 @@ export default defineComponent({
             type: String,
             required: true
         },
-        onUpdateValue: {
-            type: Function,
-            required: true
-        }
+        isMonth: {
+            type: Boolean,
+            value: false
+        },
+        isYear: {
+            type: Boolean,
+            value: false
+        },
+        onUpdateValue: Function,
+        onUpdateMonth: Function,
+        onUpdateYear: Function
     },
-    setup() {
-        const monthPanelIsActive = ref(false);
-        const yearPanelIsActive = ref(false);
+    setup(props) {
+        const monthPanelIsActive = ref(props.isMonth);
+        const yearPanelIsActive = ref(props.isYear);
         function onUpdateMonthPanelIsActive(value) {
             monthPanelIsActive.value = value;
             if (value)
@@ -31,20 +38,37 @@ export default defineComponent({
         }
         function onUpdateYearPanelIsActive(value) {
             yearPanelIsActive.value = value;
-            if (value)
+            if (value && !props.isMonth)
                 monthPanelIsActive.value = false;
         }
+        function handleUpdateMonth(value, doUpdate, item) {
+            var _a, _b;
+            (_a = props.onUpdateMonth) === null || _a === void 0 ? void 0 : _a.call(props, value, doUpdate, item);
+            (_b = props.onUpdateValue) === null || _b === void 0 ? void 0 : _b.call(props, value, doUpdate, item);
+        }
+        function handleUpdateYear(value, doUpdate, item) {
+            var _a, _b;
+            (_a = props.onUpdateYear) === null || _a === void 0 ? void 0 : _a.call(props, value, doUpdate, item);
+            (_b = props.onUpdateValue) === null || _b === void 0 ? void 0 : _b.call(props, value, doUpdate, item);
+        }
         return {
             monthPanelIsActive,
             yearPanelIsActive,
             onUpdateMonthPanelIsActive,
-            onUpdateYearPanelIsActive
+            onUpdateYearPanelIsActive,
+            handleUpdateMonth,
+            handleUpdateYear
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
-        return (h("div", { class: `${mergedClsPrefix}-date-panel-month` },
-            h(PanelMonth, { panelActive: this.monthPanelIsActive, value: this.value, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.calendarMonth, calendarYear: this.calendarYear, onUpdatePanelActive: this.onUpdateMonthPanelIsActive, onUpdateValue: this.onUpdateValue }),
-            h(PanelYear, { panelActive: this.yearPanelIsActive, value: this.value, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.calendarMonth, calendarYear: this.calendarYear, onUpdatePanelActive: this.onUpdateYearPanelIsActive, onUpdateValue: this.onUpdateValue })));
+        const { mergedClsPrefix, isYear } = this;
+        return (h("div", { class: [
+                `${mergedClsPrefix}-date-panel-month`,
+                {
+                    [`${mergedClsPrefix}-date-panel-month--justify-end`]: isYear
+                }
+            ] },
+            isYear ? null : (h(PanelMonth, { panelActive: this.monthPanelIsActive, value: this.value, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.calendarMonth, calendarYear: this.calendarYear, disabled: this.isMonth, onUpdatePanelActive: this.onUpdateMonthPanelIsActive, onUpdateValue: this.handleUpdateMonth })),
+            h(PanelYear, { panelActive: this.yearPanelIsActive, value: this.value, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.calendarMonth, calendarYear: this.calendarYear, disabled: this.isYear, onUpdatePanelActive: this.onUpdateYearPanelIsActive, onUpdateValue: this.handleUpdateYear })));
     }
 });

package/es/date-picker/src/panel/panelMonth.d.ts

@@ -1,4 +1,6 @@
 import { type PropType } from 'vue';
+import { OnPanelUpdateValue, PanelValue } from '../interface';
+import { DateCommonItem } from '../utils';
 declare const _default: import("vue").DefineComponent<{
     panelActive: BooleanConstructor;
     mergedClsPrefix: {
@@ -14,8 +16,9 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
+    disabled: BooleanConstructor;
     onUpdateValue: {
-        type: PropType<(value: number) => void>;
+        type: PropType<OnPanelUpdateValue>;
         required: true;
     };
     onUpdatePanelActive: PropType<(value: boolean) => void>;
@@ -30,6 +33,7 @@ declare const _default: import("vue").DefineComponent<{
             actions?: string[] | undefined;
             panel?: boolean | undefined;
             useAsQuickJump?: boolean | undefined;
+            readonly type?: import("../config").DatePickerType | undefined;
             key?: string | number | symbol | undefined;
             style?: unknown;
             class?: unknown;
@@ -80,7 +84,7 @@ declare const _default: import("vue").DefineComponent<{
             readonly onTabOut?: Function | undefined;
             readonly onClose?: import("../interface").OnClose | undefined;
             readonly onClear?: Function | undefined;
-            readonly onUpdateValue: import("../interface").OnPanelUpdateValue;
+            readonly onUpdateValue: OnPanelUpdateValue;
             readonly onConfirm?: ((value: import("../interface").Value | null) => void) | undefined;
             readonly timeFormat?: string | undefined;
             readonly shortcuts?: import("../interface").Shortcuts | undefined;
@@ -107,6 +111,7 @@ declare const _default: import("vue").DefineComponent<{
             };
             active: BooleanConstructor;
             dateFormat: StringConstructor;
+            type: PropType<import("../config").DatePickerType>;
             timeFormat: {
                 readonly type: StringConstructor;
                 readonly value: "HH:mm:ss";
@@ -122,7 +127,7 @@ declare const _default: import("vue").DefineComponent<{
             onClose: PropType<import("../interface").OnClose>;
             onTabOut: FunctionConstructor;
             onUpdateValue: {
-                readonly type: PropType<import("../interface").OnPanelUpdateValue>;
+                readonly type: PropType<OnPanelUpdateValue>;
                 readonly required: true;
             };
             themeClass: StringConstructor;
@@ -132,7 +137,7 @@ declare const _default: import("vue").DefineComponent<{
             renderItem: (item: import("../utils").MonthItem, i: number, mergedClsPrefix: string) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
                 [key: string]: any;
             }>;
-            handleDateClick: (dateItem: import("../utils").DateItem | import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem) => void;
+            handleDateClick: (dateItem: DateCommonItem) => void;
             handleDateInputBlur: () => void;
             handleDateInput: (value: string) => void;
             handleTimePickerChange: (value: number | null) => void;
@@ -1350,6 +1355,7 @@ declare const _default: import("vue").DefineComponent<{
         };
         active: BooleanConstructor;
         dateFormat: StringConstructor;
+        type: PropType<import("../config").DatePickerType>;
         timeFormat: {
             readonly type: StringConstructor;
             readonly value: "HH:mm:ss";
@@ -1365,7 +1371,7 @@ declare const _default: import("vue").DefineComponent<{
         onClose: PropType<import("../interface").OnClose>;
         onTabOut: FunctionConstructor;
         onUpdateValue: {
-            readonly type: PropType<import("../interface").OnPanelUpdateValue>;
+            readonly type: PropType<OnPanelUpdateValue>;
             readonly required: true;
         };
         themeClass: StringConstructor;
@@ -1375,7 +1381,7 @@ declare const _default: import("vue").DefineComponent<{
         renderItem: (item: import("../utils").MonthItem, i: number, mergedClsPrefix: string) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
         }>;
-        handleDateClick: (dateItem: import("../utils").DateItem | import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem) => void;
+        handleDateClick: (dateItem: DateCommonItem) => void;
         handleDateInputBlur: () => void;
         handleDateInput: (value: string) => void;
         handleTimePickerChange: (value: number | null) => void;
@@ -2561,7 +2567,7 @@ declare const _default: import("vue").DefineComponent<{
         handleSingleShortcutClick: (shortcut: number | [number, number] | (() => number) | readonly [number, number] | (() => [number, number] | readonly [number, number])) => void;
     }> & {} & import("vue").ComponentCustomProperties & {}) | null>;
     handleHeaderClick: () => void;
-    handleUpdateValue: (value: number) => void;
+    handleUpdateValue: (value: PanelValue, doUpdate: boolean, item?: DateCommonItem) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     panelActive: BooleanConstructor;
     mergedClsPrefix: {
@@ -2577,12 +2583,14 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
+    disabled: BooleanConstructor;
     onUpdateValue: {
-        type: PropType<(value: number) => void>;
+        type: PropType<OnPanelUpdateValue>;
         required: true;
     };
     onUpdatePanelActive: PropType<(value: boolean) => void>;
 }>>, {
+    disabled: boolean;
     panelActive: boolean;
 }, {}>;
 export default _default;

package/es/date-picker/src/panel/panelMonth.js

@@ -18,6 +18,7 @@ export default defineComponent({
             type: String,
             required: true
         },
+        disabled: Boolean,
         onUpdateValue: {
             type: Function,
             required: true
@@ -34,10 +35,12 @@ export default defineComponent({
             }
         });
         function handleHeaderClick() {
+            if (props.disabled)
+                return;
             showRef.value = !showRef.value;
         }
-        function handleUpdateValue(value) {
-            props.onUpdateValue(value);
+        function handleUpdateValue(value, doUpdate, item) {
+            props.onUpdateValue(value, doUpdate, item);
             handleHeaderClick();
         }
         return {
@@ -48,11 +51,12 @@ export default defineComponent({
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, disabled } = this;
         return (h("div", { class: `${mergedClsPrefix}-date-panel-month__month-year` },
             h("div", { class: [
                     `${mergedClsPrefix}-date-panel-month__text`,
-                    this.show && `${mergedClsPrefix}-date-panel-month__text--active`
+                    this.show && `${mergedClsPrefix}-date-panel-month__text--active`,
+                    disabled && `${mergedClsPrefix}-date-panel-month__text--disabled`
                 ], onClick: this.handleHeaderClick },
                 this.calendarMonth,
                 h(UBaseIcon, { class: `${mergedClsPrefix}-date-panel-month__icon`, clsPrefix: mergedClsPrefix }, {

package/es/date-picker/src/panel/panelMonthContent.d.ts

@@ -14,6 +14,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     active: BooleanConstructor;
     dateFormat: StringConstructor;
+    type: import("vue").PropType<import("../config").DatePickerType>;
     timeFormat: {
         readonly type: StringConstructor;
         readonly value: "HH:mm:ss";
@@ -37,7 +38,7 @@ declare const _default: import("vue").DefineComponent<{
     panel: BooleanConstructor;
 }, {
     renderItem: (item: MonthItem, i: number, mergedClsPrefix: string) => VNode;
-    handleDateClick: (dateItem: import("../utils").DateItem | MonthItem | import("../utils").YearItem | import("../utils").QuarterItem) => void;
+    handleDateClick: (dateItem: import("../utils").DateCommonItem) => void;
     handleDateInputBlur: () => void;
     handleDateInput: (value: string) => void;
     handleTimePickerChange: (value: number | null) => void;
@@ -1235,6 +1236,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     active: BooleanConstructor;
     dateFormat: StringConstructor;
+    type: import("vue").PropType<import("../config").DatePickerType>;
     timeFormat: {
         readonly type: StringConstructor;
         readonly value: "HH:mm:ss";

package/es/date-picker/src/panel/panelMonthContent.js

@@ -30,7 +30,7 @@ export default defineComponent({
                     useAsQuickJump
                         ? handleQuickMonthClick(item, (value) => {
                             ;
-                            props.onUpdateValue(value, false);
+                            props.onUpdateValue(value, false, item);
                         })
                         : handleDateClick(item);
                 } }, getRenderContent(item)));
@@ -49,10 +49,7 @@ export default defineComponent({
                 this.themeClass
             ], onFocus: this.handlePanelFocus, onKeydown: this.handlePanelKeyDown },
             h("div", { class: `${mergedClsPrefix}-date-panel-month-calendar` }, {
-                default: () => [
-                    this.monthArray.map((item, i) => renderItem(item, i, mergedClsPrefix)),
-                    h("div", { class: `${mergedClsPrefix}-date-panel-month-calendar__padding` })
-                ]
+                default: () => this.monthArray.map((item, i) => renderItem(item, i, mergedClsPrefix))
             }),
             h(UBaseFocusDetector, { onFocus: this.handleFocusDetectorFocus })));
     }

package/es/date-picker/src/panel/panelYear.d.ts

@@ -1,4 +1,6 @@
 import { type PropType } from 'vue';
+import { OnPanelUpdateValue, PanelValue } from '../interface';
+import { DateCommonItem } from '../utils';
 declare const _default: import("vue").DefineComponent<{
     panelActive: BooleanConstructor;
     mergedClsPrefix: {
@@ -14,8 +16,9 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
+    disabled: BooleanConstructor;
     onUpdateValue: {
-        type: PropType<(value: number) => void>;
+        type: PropType<OnPanelUpdateValue>;
         required: true;
     };
     onUpdatePanelActive: PropType<(value: boolean) => void>;
@@ -30,6 +33,7 @@ declare const _default: import("vue").DefineComponent<{
             actions?: string[] | undefined;
             panel?: boolean | undefined;
             useAsQuickJump?: boolean | undefined;
+            readonly type?: import("../config").DatePickerType | undefined;
             key?: string | number | symbol | undefined;
             style?: unknown;
             class?: unknown;
@@ -80,7 +84,7 @@ declare const _default: import("vue").DefineComponent<{
             readonly onTabOut?: Function | undefined;
             readonly onClose?: import("../interface").OnClose | undefined;
             readonly onClear?: Function | undefined;
-            readonly onUpdateValue: import("../interface").OnPanelUpdateValue;
+            readonly onUpdateValue: OnPanelUpdateValue;
             readonly onConfirm?: ((value: import("../interface").Value | null) => void) | undefined;
             readonly timeFormat?: string | undefined;
             readonly shortcuts?: import("../interface").Shortcuts | undefined;
@@ -107,6 +111,7 @@ declare const _default: import("vue").DefineComponent<{
             };
             active: BooleanConstructor;
             dateFormat: StringConstructor;
+            type: PropType<import("../config").DatePickerType>;
             timeFormat: {
                 readonly type: StringConstructor;
                 readonly value: "HH:mm:ss";
@@ -122,7 +127,7 @@ declare const _default: import("vue").DefineComponent<{
             onClose: PropType<import("../interface").OnClose>;
             onTabOut: FunctionConstructor;
             onUpdateValue: {
-                readonly type: PropType<import("../interface").OnPanelUpdateValue>;
+                readonly type: PropType<OnPanelUpdateValue>;
                 readonly required: true;
             };
             themeClass: StringConstructor;
@@ -132,7 +137,7 @@ declare const _default: import("vue").DefineComponent<{
             renderItem: (item: import("../utils").YearItem, i: number, mergedClsPrefix: string) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
                 [key: string]: any;
             }>;
-            handleDateClick: (dateItem: import("../utils").DateItem | import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem) => void;
+            handleDateClick: (dateItem: DateCommonItem) => void;
             handleDateInputBlur: () => void;
             handleDateInput: (value: string) => void;
             handleTimePickerChange: (value: number | null) => void;
@@ -1350,6 +1355,7 @@ declare const _default: import("vue").DefineComponent<{
         };
         active: BooleanConstructor;
         dateFormat: StringConstructor;
+        type: PropType<import("../config").DatePickerType>;
         timeFormat: {
             readonly type: StringConstructor;
             readonly value: "HH:mm:ss";
@@ -1365,7 +1371,7 @@ declare const _default: import("vue").DefineComponent<{
         onClose: PropType<import("../interface").OnClose>;
         onTabOut: FunctionConstructor;
         onUpdateValue: {
-            readonly type: PropType<import("../interface").OnPanelUpdateValue>;
+            readonly type: PropType<OnPanelUpdateValue>;
             readonly required: true;
         };
         themeClass: StringConstructor;
@@ -1375,7 +1381,7 @@ declare const _default: import("vue").DefineComponent<{
         renderItem: (item: import("../utils").YearItem, i: number, mergedClsPrefix: string) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
         }>;
-        handleDateClick: (dateItem: import("../utils").DateItem | import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem) => void;
+        handleDateClick: (dateItem: DateCommonItem) => void;
         handleDateInputBlur: () => void;
         handleDateInput: (value: string) => void;
         handleTimePickerChange: (value: number | null) => void;
@@ -2561,7 +2567,7 @@ declare const _default: import("vue").DefineComponent<{
         handleSingleShortcutClick: (shortcut: number | [number, number] | (() => number) | readonly [number, number] | (() => [number, number] | readonly [number, number])) => void;
     }> & {} & import("vue").ComponentCustomProperties & {}) | null>;
     handleHeaderClick: () => void;
-    handleUpdateValue: (value: number) => void;
+    handleUpdateValue: (value: PanelValue, doUpdate: boolean, item?: DateCommonItem) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     panelActive: BooleanConstructor;
     mergedClsPrefix: {
@@ -2577,12 +2583,14 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
+    disabled: BooleanConstructor;
     onUpdateValue: {
-        type: PropType<(value: number) => void>;
+        type: PropType<OnPanelUpdateValue>;
         required: true;
     };
     onUpdatePanelActive: PropType<(value: boolean) => void>;
 }>>, {
+    disabled: boolean;
     panelActive: boolean;
 }, {}>;
 export default _default;

package/es/date-picker/src/panel/panelYear.js

@@ -18,6 +18,7 @@ export default defineComponent({
             type: String,
             required: true
         },
+        disabled: Boolean,
         onUpdateValue: {
             type: Function,
             required: true
@@ -34,10 +35,12 @@ export default defineComponent({
             }
         });
         function handleHeaderClick() {
+            if (props.disabled)
+                return;
             showRef.value = !showRef.value;
         }
-        function handleUpdateValue(value) {
-            props.onUpdateValue(value);
+        function handleUpdateValue(value, doUpdate, item) {
+            props.onUpdateValue(value, doUpdate, item);
             handleHeaderClick();
         }
         return {
@@ -48,11 +51,12 @@ export default defineComponent({
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, disabled } = this;
         return (h("div", { class: `${mergedClsPrefix}-date-panel-month__month-year`, ref: "triggerRef" },
             h("div", { class: [
                     `${mergedClsPrefix}-date-panel-month__text`,
-                    this.show && `${mergedClsPrefix}-date-panel-month__text--active`
+                    this.show && `${mergedClsPrefix}-date-panel-month__text--active`,
+                    disabled && `${mergedClsPrefix}-date-panel-month__text--disabled`
                 ], onClick: this.handleHeaderClick },
                 this.calendarYear,
                 h(UBaseIcon, { class: `${mergedClsPrefix}-date-panel-month__icon`, clsPrefix: mergedClsPrefix }, {

package/es/date-picker/src/panel/panelYearContent.d.ts

@@ -14,6 +14,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     active: BooleanConstructor;
     dateFormat: StringConstructor;
+    type: import("vue").PropType<import("../config").DatePickerType>;
     timeFormat: {
         readonly type: StringConstructor;
         readonly value: "HH:mm:ss";
@@ -37,7 +38,7 @@ declare const _default: import("vue").DefineComponent<{
     panel: BooleanConstructor;
 }, {
     renderItem: (item: YearItem, i: number, mergedClsPrefix: string) => VNode;
-    handleDateClick: (dateItem: import("../utils").DateItem | import("../utils").MonthItem | YearItem | import("../utils").QuarterItem) => void;
+    handleDateClick: (dateItem: import("../utils").DateCommonItem) => void;
     handleDateInputBlur: () => void;
     handleDateInput: (value: string) => void;
     handleTimePickerChange: (value: number | null) => void;
@@ -1247,6 +1248,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     active: BooleanConstructor;
     dateFormat: StringConstructor;
+    type: import("vue").PropType<import("../config").DatePickerType>;
     timeFormat: {
         readonly type: StringConstructor;
         readonly value: "HH:mm:ss";

package/es/date-picker/src/panel/panelYearContent.js

@@ -27,7 +27,7 @@ export default defineComponent({
                     useAsQuickJump
                         ? handleQuickMonthClick(item, (value) => {
                             ;
-                            props.onUpdateValue(value, false);
+                            props.onUpdateValue(value, false, item);
                         })
                         : handleDateClick(item);
                 } }, getRenderContent(item)));
@@ -43,6 +43,7 @@ export default defineComponent({
         return (h("div", { ref: "selfRef", tabindex: 0, class: [
                 `${mergedClsPrefix}-date-panel`,
                 `${mergedClsPrefix}-date-panel--month`,
+                `${mergedClsPrefix}-date-panel--year`,
                 this.themeClass
             ], onFocus: this.handlePanelFocus, onKeydown: this.handlePanelKeyDown },
             h(UScrollbar, { ref: "yearScrollbarRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, horizontalRailStyle: { zIndex: 1 }, verticalRailStyle: { zIndex: 1 } }, {

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

@@ -2,7 +2,7 @@ import { type ExtractPropTypes, type PropType } from 'vue';
 import type { VirtualListInst } from 'vueuc';
 import type { ScrollbarInst } from '../../../_internal';
 import type { Shortcuts } from '../interface';
-import type { DateItem, MonthItem, YearItem, QuarterItem } from '../utils';
+import type { MonthItem, YearItem, QuarterItem, DateCommonItem } from '../utils';
 declare const useCalendarProps: {
     readonly actions: {
         readonly type: PropType<string[]>;
@@ -10,6 +10,7 @@ declare const useCalendarProps: {
     };
     readonly active: BooleanConstructor;
     readonly dateFormat: StringConstructor;
+    readonly type: PropType<import("../config").DatePickerType>;
     readonly timeFormat: {
         readonly type: StringConstructor;
         readonly value: "HH:mm:ss";
@@ -33,7 +34,7 @@ declare const useCalendarProps: {
     readonly panel: BooleanConstructor;
 };
 declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, type: 'date' | 'datetime' | 'month' | 'year' | 'quarter'): {
-    handleDateClick: (dateItem: DateItem | MonthItem | YearItem | QuarterItem) => void;
+    handleDateClick: (dateItem: DateCommonItem) => void;
     handleDateInputBlur: () => void;
     handleDateInput: (value: string) => void;
     handleTimePickerChange: (value: number | null) => void;
@@ -1201,7 +1202,7 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
     isHourDisabled: import("vue").ComputedRef<import("../../../time-picker/src/interface").IsHourDisabled | undefined>;
     isMinuteDisabled: import("vue").ComputedRef<import("../../../time-picker/src/interface").IsMinuteDisabled | undefined>;
     isSecondDisabled: import("vue").ComputedRef<import("../../../time-picker/src/interface").IsSecondDisabled | undefined>;
-    dateArray: import("vue").ComputedRef<DateItem[]>;
+    dateArray: import("vue").ComputedRef<import("../utils").DateItem[]>;
     monthArray: import("vue").ComputedRef<MonthItem[]>;
     yearArray: import("vue").ComputedRef<YearItem[]>;
     quarterArray: import("vue").ComputedRef<QuarterItem[]>;

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

@@ -13,6 +13,7 @@ declare const useDualCalendarProps: {
     };
     readonly active: BooleanConstructor;
     readonly dateFormat: StringConstructor;
+    readonly type: import("vue").PropType<import("../config").DatePickerType>;
     readonly timeFormat: {
         readonly type: StringConstructor;
         readonly value: "HH:mm:ss";

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

@@ -1,8 +1,10 @@
 import { type PropType, type ExtractPropTypes } from 'vue';
 import { type Value, type OnPanelUpdateValue, type OnClose, type Shortcuts, type DefaultTime } from '../interface';
+import { DatePickerType } from '../config';
 declare const usePanelCommonProps: {
     readonly active: BooleanConstructor;
     readonly dateFormat: StringConstructor;
+    readonly type: PropType<DatePickerType>;
     readonly timeFormat: {
         readonly type: StringConstructor;
         readonly value: "HH:mm:ss";

package/es/date-picker/src/panel/use-panel-common.js

@@ -5,6 +5,7 @@ const TIME_FORMAT = 'HH:mm:ss';
 const usePanelCommonProps = {
     active: Boolean,
     dateFormat: String,
+    type: String,
     timeFormat: {
         type: String,
         value: TIME_FORMAT

package/es/date-picker/src/styles/index.cssr.js

@@ -168,6 +168,8 @@ export default c([cB('date-picker', `
   margin: 0,
   padding: '15px 16px',
   boxSizing: 'border-box'
+}), cM('year', {
+  zIndex: '2'
 }), cB('date-panel-footer', {
   gridArea: 'footer'
 }), cB('date-panel-actions', {
@@ -190,21 +192,20 @@ export default c([cB('date-picker', `
   zIndex: 1
 })]), c('~ .u-date-panel-calendar', {
   paddingTop: '16px'
-})]), cB('date-panel-month', {
+})]), cB('date-panel-placeholder', {
+  width: '266px',
+  height: '250px'
+}), cB('date-panel-month', {
   boxSizing: 'border-box',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
   padding: 'var(--u-calendar-title-padding)',
   height: 'var(--u-calendar-title-height)'
-}, [cE('icon', `
+}, [cM('justify-end', {
+  justifyContent: 'end'
+}), cE('icon', `
  font-size: var(--u-arrow-size);
- `), cE('prev, next, fast-prev, fast-next', `
- line-height: 0;
- cursor: pointer;
- width: var(--u-arrow-size);
- height: var(--u-arrow-size);
- color: var(--u-arrow-color);
  `), cE('month-year', {
   userSelect: 'none',
   '-webkit-user-select': 'none'
@@ -217,10 +218,11 @@ export default c([cB('date-picker', `
  padding: 6px 8px;
  text-align: center;
  color: var(--u-calendar-title-text-color);
- cursor: pointer;
  transition: .3s var(--u-bezier);
  border-radius: var(--u-panel-border-radius);
- `, [c('.u-icon', {
+ `, [cNotM('disabled', {
+  cursor: 'pointer'
+}), c('.u-icon', {
   width: '24px',
   transition: 'transform .3s var(--u-bezier)'
 }), cM('active', `

package/es/date-picker/src/utils.d.ts

@@ -45,6 +45,7 @@ export interface QuarterItem {
     selected: boolean;
     ts: number;
 }
+export type DateCommonItem = DateItem | MonthItem | YearItem | QuarterItem;
 /**
  * Given time to display calendar, given the selected time, given current time,
  * return the date array of display time's month.
@@ -62,4 +63,5 @@ declare function getDefaultTime(timeValue: string | undefined): {
     seconds: number;
 } | undefined;
 declare function pluckValueFromRange(value: Value | null, type: 'start' | 'end'): number | null;
-export { dateArray, monthArray, yearArray, quarterArray, strictParse, getDerivedTimeFromKeyboardEvent, getDefaultTime, pluckValueFromRange };
+declare function getMsByDateCommonItem(item?: DateCommonItem): number;
+export { dateArray, monthArray, yearArray, quarterArray, strictParse, getDerivedTimeFromKeyboardEvent, getDefaultTime, getMsByDateCommonItem, pluckValueFromRange };