@uzum-tech/ui 1.1.5 → 1.2.1

package/es/_utils/uzum/warn.js

@@ -1,14 +1,14 @@
 const warnedMessages = new Set();
 export function warnOnce(location, message) {
-    const mergedMessage = `[naive/${location}]: ${message}`;
+    const mergedMessage = `[uzum-ui/${location}]: ${message}`;
     if (warnedMessages.has(mergedMessage))
         return;
     warnedMessages.add(mergedMessage);
     console.error(mergedMessage);
 }
 export function warn(location, message) {
-    console.error(`[naive/${location}]: ${message}`);
+    console.error(`[uzum-ui/${location}]: ${message}`);
 }
 export function throwError(location, message) {
-    throw new Error(`[naive/${location}]: ${message}`);
+    throw new Error(`[uzum-ui/${location}]: ${message}`);
 }

package/es/alert/src/Alert.js

@@ -128,7 +128,7 @@ export default defineComponent({
                         this.actionsHorizontal &&
                             `${mergedClsPrefix}-alert--horizontal`,
                         this.showIcon && `${mergedClsPrefix}-alert--show-icon`,
-                        // fix: https://github.com/tusen-ai/naive-ui/issues/4588
+                        // fix: https://github.com/tusen-ai/uzum-ui/issues/4588
                         !this.title &&
                             this.closable &&
                             `${mergedClsPrefix}-alert--right-adjust`,

package/es/alert/src/styles/index.cssr.js

@@ -60,7 +60,7 @@ export default cB('alert', `
  width: var(--u-close-icon-size);
  height: var(--u-close-icon-size);
  `),
-// fix: https://github.com/tusen-ai/naive-ui/issues/4588
+// fix: https://github.com/tusen-ai/uzum-ui/issues/4588
 cM('right-adjust', [cB('alert-body', `
  padding-right: calc(var(--u-close-size) + var(--u-padding) + 2px);
  `)]), cM('show-icon', [cB('alert-body', [cE('content, title', `

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

@@ -4206,6 +4206,7 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }, {
+    rangeTypes: DatePickerType[];
     mergedStatus: import("vue").ComputedRef<FormValidationStatus | undefined>;
     mergedClsPrefix: Ref<string>;
     mergedBordered: import("vue").ComputedRef<boolean>;

package/es/date-picker/src/DatePicker.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, Transition, computed, provide, watch, withDirectives, toRef, watchEffect, Fragment } from 'vue';
+import { h, defineComponent, ref, Transition, computed, provide, watch, withDirectives, toRef, watchEffect } from 'vue';
 import { VBinder, VTarget, VFollower } from 'vueuc';
 import { clickoutside } from 'vdirs';
 import { format, getTime, isValid, addWeeks, addMonths, addYears } from 'date-fns'; //
@@ -17,7 +17,6 @@ import DatetimePanel from './panel/datetime';
 import DatetimeRangePanel from './panel/datetimerange';
 import DatePanel from './panel/date';
 import DateRangePanel from './panel/daterange';
-import MonthRangePanel from './panel/monthrange';
 import style from './styles/index.cssr';
 export const datePickerProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, bordered: {
         type: Boolean,
@@ -49,6 +48,12 @@ export default defineComponent({
                 }
             });
         }
+        const rangeTypes = [
+            'daterange',
+            'monthrange',
+            'yearrange',
+            'quarterrange'
+        ];
         const { localeRef, dateLocaleRef } = useLocale('DatePicker');
         const formItem = useFormItem(props);
         const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
@@ -683,7 +688,7 @@ export default defineComponent({
                 return props.type;
             }), cssVarsRef, props)
             : undefined;
-        return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, uncontrolledValue: uncontrolledValueRef, pendingValue: pendingValueRef, panelInstRef,
+        return Object.assign(Object.assign({}, exposedMethods), { rangeTypes, mergedStatus: mergedStatusRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, uncontrolledValue: uncontrolledValueRef, pendingValue: pendingValueRef, panelInstRef,
             triggerElRef,
             inputInstRef, isMounted: useIsMounted(), displayTime: singleInputValueRef, displayStartTime: rangeStartInputValueRef, displayEndTime: rangeEndInputValueRef, mergedShow: mergedShowRef, adjustedTo: useAdjustedTo(props), isRange: isRangeRef, localizedStartPlaceholder: localizedStartPlaceholderRef, localizedEndPlaceholder: localizedEndPlaceholderRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, localizedPlacehoder: localizedPlacehoderRef, isValueInvalid: uniVaidation.isValueInvalidRef, isStartValueInvalid: dualValidation.isStartValueInvalidRef, isEndValueInvalid: dualValidation.isEndValueInvalidRef, handleInputKeydown,
             handleClickOutside,
@@ -726,11 +731,8 @@ export default defineComponent({
             onRender: this.onRender
         };
         const renderPanel = () => {
-            const { type } = this;
-            return type === 'datetime' ? (h(DatetimePanel, Object.assign({}, commonPanelProps), $slots)) : type === 'daterange' ? (h(DateRangePanel, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }), $slots)) : type === 'datetimerange' ? (h(DatetimeRangePanel, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }), $slots)) : type === 'month' || type === 'year' || type === 'quarter' ? (h(Fragment, null)) // <PanelMonth {...commonPanelProps} key={type} />
-                : type === 'monthrange' ||
-                    type === 'yearrange' ||
-                    type === 'quarterrange' ? (h(MonthRangePanel, Object.assign({}, commonPanelProps, { type: type }))) : (h(DatePanel, Object.assign({}, commonPanelProps), $slots));
+            const { type, rangeTypes } = this;
+            return type === 'datetime' ? (h(DatetimePanel, Object.assign({}, commonPanelProps), $slots)) : rangeTypes.includes(type) ? (h(DateRangePanel, Object.assign({}, commonPanelProps, { type: type, defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }), $slots)) : type === 'datetimerange' ? (h(DatetimeRangePanel, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }), $slots)) : (h(DatePanel, Object.assign({}, commonPanelProps, { type: type }), $slots));
         };
         if (this.panel) {
             return renderPanel();

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

@@ -1,4 +1,4 @@
-export declare const START_YEAR = 1901;
+export declare const START_YEAR = 1924;
 export declare const END_YEAR: number;
 export declare const MONTH_ITEM_HEIGHT = 50;
 export declare const MONTH_ITEM_GAP = 8;

package/es/date-picker/src/config.js

@@ -1,4 +1,4 @@
-export const START_YEAR = 1901;
+export const START_YEAR = 1924;
 export const END_YEAR = new Date().getFullYear();
 export const MONTH_ITEM_HEIGHT = 50;
 export const MONTH_ITEM_GAP = 8;

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

@@ -7,7 +7,12 @@ import type { TimePickerProps } from '../../time-picker/src/TimePicker';
 import type { MergedTheme } from '../../_mixins';
 import type { DatePickerTheme } from '../styles/light';
 import type { uniCalendarValidation, dualCalendarValidation } from './validation-utils';
+import { DateCommonItem } from './utils';
 export type Value = number | [number, number];
+export type PanelValue = number & (number | null) & [
+    number,
+    number
+] & ([number, number] | null);
 export type DefaultTime = string | [string | undefined, string | undefined];
 export type FormattedValue = string | [string, string];
 export type Shortcuts = Record<string, number | (() => number)> | Record<string, [number, number] | readonly [number, number] | (() => [number, number] | readonly [number, number])>;
@@ -29,11 +34,8 @@ export type OnUpdateFormattedValue = (value: string & (string | null) & [
 ] & ([number, number] | null)) => void;
 export type OnUpdateFormattedValueImpl = (value: string | [string, string] | null, timestampValue: number | [number, number] | null) => void;
 export type OnUpdateValueImpl = (value: Value | null, formattedValue: string | [string, string] | null) => void;
-export type OnPanelUpdateValue = (value: number & (number | null) & [
-    number,
-    number
-] & ([number, number] | null), doUpdate: boolean) => void;
-export type OnPanelUpdateValueImpl = (value: Value | null, doUpdate: boolean) => void;
+export type OnPanelUpdateValue = (value: PanelValue, doUpdate: boolean, item?: DateCommonItem) => void;
+export type OnPanelUpdateValueImpl = (value: Value | null, doUpdate: boolean, item?: DateCommonItem) => void;
 export type OnClose = (disableUpdateOnClose: boolean) => void;
 export interface RangePanelChildComponentRefs {
     startYearScrollbarRef: Ref<ScrollbarInst | null>;

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

@@ -1,3 +1,5 @@
+import { DatePickerType } from '../config';
+import { DateCommonItem, DateItem } from '../utils';
 /**
  * Date Panel
  * Update picker value on:
@@ -10,7 +12,14 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => string[];
     };
     readonly active: BooleanConstructor;
+    /**
+     * Date Panel
+     * Update picker value on:
+     * 1. item click
+     * 2. clear click
+     */
     readonly dateFormat: StringConstructor;
+    readonly type: import("vue").PropType<DatePickerType>;
     readonly timeFormat: {
         readonly type: StringConstructor;
         readonly value: "HH:mm:ss";
@@ -33,7 +42,12 @@ declare const _default: import("vue").DefineComponent<{
     readonly onRender: import("vue").PropType<(() => void) | undefined>;
     readonly panel: BooleanConstructor;
 }, {
-    handleDateClick: (dateItem: import("../utils").DateItem | import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem) => void;
+    isWithoutDay: import("vue").ComputedRef<boolean>;
+    isMonth: import("vue").ComputedRef<boolean>;
+    isYear: import("vue").ComputedRef<boolean>;
+    handleMonthClick: (value: number, _doUpdate: boolean, item?: DateCommonItem) => void;
+    handleYearClick: (value: number, _doUpdate: boolean, item?: DateCommonItem) => void;
+    handleDateClick: (dateItem: DateCommonItem) => void;
     handleDateInputBlur: () => void;
     handleDateInput: (value: string) => void;
     handleTimePickerChange: (value: number | null) => void;
@@ -114,12 +128,6 @@ declare const _default: import("vue").DefineComponent<{
             fontFamily: string;
             fontFamilyMono: string;
             cubicBezierEaseInOut: string;
-            /**
-             * Date Panel
-             * Update picker value on:
-             * 1. item click
-             * 2. clear click
-             */
             cubicBezierEaseOut: string;
             cubicBezierEaseIn: string;
             borderRadiusLarge: string;
@@ -1207,7 +1215,7 @@ declare const _default: import("vue").DefineComponent<{
     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<import("../utils").DateItem[]>;
+    dateArray: import("vue").ComputedRef<DateItem[]>;
     monthArray: import("vue").ComputedRef<import("../utils").MonthItem[]>;
     yearArray: import("vue").ComputedRef<import("../utils").YearItem[]>;
     quarterArray: import("vue").ComputedRef<import("../utils").QuarterItem[]>;
@@ -1229,7 +1237,14 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => string[];
     };
     readonly active: BooleanConstructor;
+    /**
+     * Date Panel
+     * Update picker value on:
+     * 1. item click
+     * 2. clear click
+     */
     readonly dateFormat: StringConstructor;
+    readonly type: import("vue").PropType<DatePickerType>;
     readonly timeFormat: {
         readonly type: StringConstructor;
         readonly value: "HH:mm:ss";

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

@@ -1,9 +1,10 @@
-import { defineComponent, watchEffect, h } from 'vue';
+import { defineComponent, watchEffect, h, computed, Fragment } from 'vue';
 import { UButton, UxButton } from '../../../button';
 import { UBaseFocusDetector } from '../../../_internal';
 import { warnOnce } from '../../../_utils';
 import { useCalendar, useCalendarProps } from './use-calendar';
 import PanelHeader from './panelHeader';
+import { getMsByDateCommonItem } from '../utils';
 /**
  * Date Panel
  * Update picker value on:
@@ -22,11 +23,34 @@ export default defineComponent({
                 }
             });
         }
-        return useCalendar(props, 'date');
+        const calendar = useCalendar(props, 'date');
+        const type = props.type;
+        const monthTypes = ['month', 'quarter'];
+        const withoutDayTypes = [...monthTypes, 'year'];
+        const isWithoutDay = computed(() => withoutDayTypes.includes(type));
+        const isMonth = computed(() => monthTypes.includes(type));
+        const isYear = computed(() => type === 'year');
+        const updateMonth = (item) => {
+            const dateItem = item;
+            calendar.handleDateClick(Object.assign(Object.assign({}, dateItem), { dateObject: Object.assign(Object.assign({}, dateItem.dateObject), { month: dateItem.dateObject.month || 0, date: 1 }), ts: getMsByDateCommonItem(dateItem) }));
+        };
+        const handleMonthClick = (value, _doUpdate, item) => {
+            calendar.onUpdateCalendarValue(value);
+            isMonth.value && updateMonth(item);
+        };
+        const handleYearClick = (value, _doUpdate, item) => {
+            calendar.onUpdateCalendarValue(value);
+            isYear.value && updateMonth(item);
+        };
+        return Object.assign(Object.assign({}, calendar), { isWithoutDay,
+            isMonth,
+            isYear,
+            handleMonthClick,
+            handleYearClick });
     },
     render() {
         var _a, _b, _c;
-        const { mergedClsPrefix, shortcuts, onRender } = this;
+        const { mergedClsPrefix, shortcuts, onRender, isWithoutDay, isYear, isMonth, handleMonthClick, handleYearClick } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h("div", { ref: "selfRef", tabindex: 0, class: [
                 `${mergedClsPrefix}-date-panel`,
@@ -35,21 +59,22 @@ export default defineComponent({
                 this.themeClass
             ], onFocus: this.handlePanelFocus, onKeydown: this.handlePanelKeyDown },
             h("div", { class: `${mergedClsPrefix}-date-panel-calendar` },
-                h(PanelHeader, { value: this.calendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.calendarMonth, calendarYear: this.calendarYear, onUpdateValue: this.onUpdateCalendarValue }),
-                h("div", { class: `${mergedClsPrefix}-date-panel-weekdays` }, this.weekdays.map((weekday) => (h("div", { key: weekday, class: `${mergedClsPrefix}-date-panel-weekdays__day` }, weekday)))),
-                h("div", { class: `${mergedClsPrefix}-date-panel-dates` }, this.dateArray.map((dateItem, i) => (h("div", { "data-u-date": true, key: i, class: [
-                        `${mergedClsPrefix}-date-panel-date`,
-                        {
-                            [`${mergedClsPrefix}-date-panel-date--current`]: dateItem.isCurrentDate,
-                            [`${mergedClsPrefix}-date-panel-date--selected`]: dateItem.selected,
-                            [`${mergedClsPrefix}-date-panel-date--excluded`]: !dateItem.inCurrentMonth,
-                            [`${mergedClsPrefix}-date-panel-date--disabled`]: this.mergedIsDateDisabled(dateItem.ts)
-                        }
-                    ], onClick: () => {
-                        this.handleDateClick(dateItem);
-                    } },
-                    h("div", { class: `${mergedClsPrefix}-date-panel-date__trigger` }),
-                    dateItem.dateObject.date))))),
+                h(PanelHeader, { value: this.calendarValue, isMonth: isMonth, isYear: isYear, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.calendarMonth, calendarYear: this.calendarYear, onUpdateMonth: handleMonthClick, onUpdateYear: handleYearClick }),
+                isWithoutDay ? (h("div", { class: `${mergedClsPrefix}-date-panel-placeholder` })) : (h(Fragment, null,
+                    h("div", { class: `${mergedClsPrefix}-date-panel-weekdays` }, this.weekdays.map((weekday) => (h("div", { key: weekday, class: `${mergedClsPrefix}-date-panel-weekdays__day` }, weekday)))),
+                    h("div", { class: `${mergedClsPrefix}-date-panel-dates` }, this.dateArray.map((dateItem, i) => (h("div", { "data-u-date": true, key: i, class: [
+                            `${mergedClsPrefix}-date-panel-date`,
+                            {
+                                [`${mergedClsPrefix}-date-panel-date--current`]: dateItem.isCurrentDate,
+                                [`${mergedClsPrefix}-date-panel-date--selected`]: dateItem.selected,
+                                [`${mergedClsPrefix}-date-panel-date--excluded`]: !dateItem.inCurrentMonth,
+                                [`${mergedClsPrefix}-date-panel-date--disabled`]: this.mergedIsDateDisabled(dateItem.ts)
+                            }
+                        ], onClick: () => {
+                            this.handleDateClick(dateItem);
+                        } },
+                        h("div", { class: `${mergedClsPrefix}-date-panel-date__trigger` }),
+                        dateItem.dateObject.date))))))),
             this.datePickerSlots.footer ? (h("div", { class: `${mergedClsPrefix}-date-panel-footer` }, this.datePickerSlots.footer())) : null,
             ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) || shortcuts ? (h("div", { class: `${mergedClsPrefix}-date-panel-actions` },
                 h("div", { class: `${mergedClsPrefix}-date-panel-actions__prefix` }, shortcuts &&

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

@@ -1,3 +1,5 @@
+import { DatePickerType } from '../config';
+import { DateCommonItem, DateItem, MonthItem } from '../utils';
 declare const _default: import("vue").DefineComponent<{
     readonly defaultCalendarStartTime: NumberConstructor;
     readonly defaultCalendarEndTime: NumberConstructor;
@@ -8,6 +10,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly active: BooleanConstructor;
     readonly dateFormat: StringConstructor;
+    readonly type: import("vue").PropType<DatePickerType>;
     readonly timeFormat: {
         readonly type: StringConstructor;
         readonly value: "HH:mm:ss";
@@ -30,6 +33,13 @@ declare const _default: import("vue").DefineComponent<{
     readonly onRender: import("vue").PropType<(() => void) | undefined>;
     readonly panel: BooleanConstructor;
 }, {
+    isMonthRange: import("vue").ComputedRef<boolean>;
+    isYearRange: import("vue").ComputedRef<boolean>;
+    isWithoutDay: import("vue").ComputedRef<boolean>;
+    handleMonthStartClick: (value: number, _doUpdate: boolean, item?: DateCommonItem) => void;
+    handleMonthEndClick: (value: number, _doUpdate: boolean, item?: DateCommonItem) => void;
+    handleYearStartClick: (value: number, _doUpdate: boolean, item?: DateCommonItem) => void;
+    handleYearEndClick: (value: number, _doUpdate: boolean, item?: DateCommonItem) => void;
     startDateDisplayString: import("vue").Ref<string>;
     endDateInput: import("vue").Ref<string>;
     timePickerSize: import("vue").Ref<import("../../..").InputSize>;
@@ -1220,9 +1230,9 @@ declare const _default: import("vue").DefineComponent<{
     handleOpenQuickSelectMonthPanel: () => void;
     startDatesElRef: import("vue").Ref<HTMLElement | null>;
     endDatesElRef: import("vue").Ref<HTMLElement | null>;
-    handleDateClick: (dateItem: import("../utils").DateItem) => void;
-    handleColItemClick: (dateItem: import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem, clickType: "start" | "end") => void;
-    handleDateMouseEnter: (dateItem: import("../utils").DateItem) => void;
+    handleDateClick: (dateItem: DateItem) => void;
+    handleColItemClick: (dateItem: MonthItem | import("../utils").YearItem | import("../utils").QuarterItem, clickType: "start" | "end") => void;
+    handleDateMouseEnter: (dateItem: DateItem) => void;
     handleConfirmClick: () => void;
     startCalendarPrevYear: () => void;
     startCalendarPrevMonth: () => void;
@@ -1240,13 +1250,13 @@ declare const _default: import("vue").DefineComponent<{
     endCalendarMonth: import("vue").ComputedRef<string>;
     endCalendarYear: import("vue").ComputedRef<string>;
     weekdays: import("vue").ComputedRef<string[]>;
-    startDateArray: import("vue").ComputedRef<import("../utils").DateItem[]>;
-    endDateArray: import("vue").ComputedRef<import("../utils").DateItem[]>;
+    startDateArray: import("vue").ComputedRef<DateItem[]>;
+    endDateArray: import("vue").ComputedRef<DateItem[]>;
     startYearArray: import("vue").ComputedRef<import("../utils").YearItem[]>;
-    startMonthArray: import("vue").ComputedRef<import("../utils").MonthItem[]>;
+    startMonthArray: import("vue").ComputedRef<MonthItem[]>;
     startQuarterArray: import("vue").ComputedRef<import("../utils").QuarterItem[]>;
     endYearArray: import("vue").ComputedRef<import("../utils").YearItem[]>;
-    endMonthArray: import("vue").ComputedRef<import("../utils").MonthItem[]>;
+    endMonthArray: import("vue").ComputedRef<MonthItem[]>;
     endQuarterArray: import("vue").ComputedRef<import("../utils").QuarterItem[]>;
     isSelecting: import("vue").Ref<boolean>;
     handleRangeShortcutMouseenter: (shortcut: number | [number, number] | (() => number) | readonly [number, number] | (() => [number, number] | readonly [number, number])) => void;
@@ -1261,6 +1271,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly active: BooleanConstructor;
     readonly dateFormat: StringConstructor;
+    readonly type: import("vue").PropType<DatePickerType>;
     readonly timeFormat: {
         readonly type: StringConstructor;
         readonly value: "HH:mm:ss";

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

@@ -1,9 +1,21 @@
-import { defineComponent, h, watchEffect } from 'vue';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { defineComponent, h, watchEffect, computed, Fragment } from 'vue';
 import { UButton, UxButton } from '../../../button';
 import { UBaseFocusDetector } from '../../../_internal';
 import { warnOnce } from '../../../_utils';
 import { useDualCalendar, useDualCalendarProps } from './use-dual-calendar';
 import PanelHeader from './panelHeader';
+import { getMsByDateCommonItem } from '../utils';
 export default defineComponent({
     name: 'DateRangePanel',
     props: useDualCalendarProps,
@@ -16,11 +28,49 @@ export default defineComponent({
                 }
             });
         }
-        return useDualCalendar(props, 'daterange');
+        const calendar = useDualCalendar(props, 'daterange');
+        const type = props.type;
+        const monthRanges = ['monthrange', 'quarterrange'];
+        const withoutDayTypes = [...monthRanges, 'yearrange'];
+        const isWithoutDay = computed(() => withoutDayTypes.includes(type));
+        const isMonthRange = computed(() => monthRanges.includes(type));
+        const isYearRange = computed(() => type === 'yearrange');
+        const monthToDateItem = (item, isEnd = false) => {
+            const _a = item, { dateObject } = _a, monthItem = __rest(_a, ["dateObject"]);
+            return Object.assign(Object.assign({}, monthItem), { dateObject: Object.assign(Object.assign({}, dateObject), { date: 1 }), inCurrentMonth: false, isCurrentDate: false, inSpan: false, startOfSpan: false, endOfSpan: isEnd, selected: isEnd, ts: getMsByDateCommonItem(item), type: 'date' });
+        };
+        const setMonthRange = (item, isEnd = false) => {
+            const monthItem = monthToDateItem(item, isEnd);
+            calendar.handleDateMouseEnter(monthItem);
+            calendar.handleDateClick(monthItem);
+        };
+        const handleMonthStartClick = (value, _doUpdate, item) => {
+            calendar.onUpdateStartCalendarValue(value);
+            isMonthRange.value && setMonthRange(item);
+        };
+        const handleMonthEndClick = (value, _doUpdate, item) => {
+            calendar.onUpdateEndCalendarValue(value);
+            isMonthRange.value && setMonthRange(item, true);
+        };
+        const handleYearStartClick = (value, _doUpdate, item) => {
+            calendar.onUpdateStartCalendarValue(value);
+            isYearRange.value && setMonthRange(item);
+        };
+        const handleYearEndClick = (value, _doUpdate, item) => {
+            calendar.onUpdateEndCalendarValue(value);
+            isYearRange.value && setMonthRange(item, true);
+        };
+        return Object.assign(Object.assign({}, calendar), { isMonthRange,
+            isYearRange,
+            isWithoutDay,
+            handleMonthStartClick,
+            handleMonthEndClick,
+            handleYearStartClick,
+            handleYearEndClick });
     },
     render() {
         var _a, _b, _c;
-        const { mergedClsPrefix, shortcuts, onRender } = this;
+        const { mergedClsPrefix, shortcuts, onRender, isMonthRange, isYearRange, isWithoutDay, handleMonthStartClick, handleMonthEndClick, handleYearStartClick, handleYearEndClick } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h("div", { ref: "selfRef", tabindex: 0, class: [
                 `${mergedClsPrefix}-date-panel`,
@@ -29,47 +79,49 @@ export default defineComponent({
                 this.themeClass
             ], onKeydown: this.handlePanelKeyDown, onFocus: this.handlePanelFocus },
             h("div", { ref: "startDatesElRef", class: `${mergedClsPrefix}-date-panel-calendar ${mergedClsPrefix}-date-panel-calendar--start` },
-                h(PanelHeader, { value: this.startCalendarDateTime, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.startCalendarMonth, calendarYear: this.startCalendarYear, onUpdateValue: this.onUpdateStartCalendarValue }),
-                h("div", { class: `${mergedClsPrefix}-date-panel-weekdays` }, this.weekdays.map((weekday) => (h("div", { key: weekday, class: `${mergedClsPrefix}-date-panel-weekdays__day` }, weekday)))),
-                h("div", { class: `${mergedClsPrefix}-date-panel-dates` }, this.startDateArray.map((dateItem, i) => (h("div", { "data-u-date": true, key: i, class: [
-                        `${mergedClsPrefix}-date-panel-date`,
-                        {
-                            [`${mergedClsPrefix}-date-panel-date--excluded`]: !dateItem.inCurrentMonth,
-                            [`${mergedClsPrefix}-date-panel-date--current`]: dateItem.isCurrentDate,
-                            [`${mergedClsPrefix}-date-panel-date--selected`]: dateItem.selected,
-                            [`${mergedClsPrefix}-date-panel-date--covered`]: dateItem.inSpan,
-                            [`${mergedClsPrefix}-date-panel-date--start`]: dateItem.startOfSpan,
-                            [`${mergedClsPrefix}-date-panel-date--end`]: dateItem.endOfSpan,
-                            [`${mergedClsPrefix}-date-panel-date--disabled`]: this.mergedIsDateDisabled(dateItem.ts)
-                        }
-                    ], onClick: () => {
-                        this.handleDateClick(dateItem);
-                    }, onMouseenter: () => {
-                        this.handleDateMouseEnter(dateItem);
-                    } },
-                    h("div", { class: `${mergedClsPrefix}-date-panel-date__trigger` }),
-                    dateItem.dateObject.date))))),
+                h(PanelHeader, { value: this.startCalendarDateTime, mergedClsPrefix: mergedClsPrefix, isMonth: isMonthRange, isYear: isYearRange, calendarMonth: this.startCalendarMonth, calendarYear: this.startCalendarYear, onUpdateMonth: handleMonthStartClick, onUpdateYear: handleYearStartClick }),
+                isWithoutDay ? (h("div", { class: `${mergedClsPrefix}-date-panel-placeholder` })) : (h(Fragment, null,
+                    h("div", { class: `${mergedClsPrefix}-date-panel-weekdays` }, this.weekdays.map((weekday) => (h("div", { key: weekday, class: `${mergedClsPrefix}-date-panel-weekdays__day` }, weekday)))),
+                    h("div", { class: `${mergedClsPrefix}-date-panel-dates` }, this.startDateArray.map((dateItem, i) => (h("div", { "data-u-date": true, key: i, class: [
+                            `${mergedClsPrefix}-date-panel-date`,
+                            {
+                                [`${mergedClsPrefix}-date-panel-date--excluded`]: !dateItem.inCurrentMonth,
+                                [`${mergedClsPrefix}-date-panel-date--current`]: dateItem.isCurrentDate,
+                                [`${mergedClsPrefix}-date-panel-date--selected`]: dateItem.selected,
+                                [`${mergedClsPrefix}-date-panel-date--covered`]: dateItem.inSpan,
+                                [`${mergedClsPrefix}-date-panel-date--start`]: dateItem.startOfSpan,
+                                [`${mergedClsPrefix}-date-panel-date--end`]: dateItem.endOfSpan,
+                                [`${mergedClsPrefix}-date-panel-date--disabled`]: this.mergedIsDateDisabled(dateItem.ts)
+                            }
+                        ], onClick: () => {
+                            this.handleDateClick(dateItem);
+                        }, onMouseenter: () => {
+                            this.handleDateMouseEnter(dateItem);
+                        } },
+                        h("div", { class: `${mergedClsPrefix}-date-panel-date__trigger` }),
+                        dateItem.dateObject.date))))))),
             h("div", { ref: "endDatesElRef", class: `${mergedClsPrefix}-date-panel-calendar ${mergedClsPrefix}-date-panel-calendar--end` },
-                h(PanelHeader, { value: this.endCalendarDateTime, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.endCalendarMonth, calendarYear: this.endCalendarYear, onUpdateValue: this.onUpdateEndCalendarValue }),
-                h("div", { class: `${mergedClsPrefix}-date-panel-weekdays` }, this.weekdays.map((weekday) => (h("div", { key: weekday, class: `${mergedClsPrefix}-date-panel-weekdays__day` }, weekday)))),
-                h("div", { class: `${mergedClsPrefix}-date-panel-dates` }, this.endDateArray.map((dateItem, i) => (h("div", { "data-u-date": true, key: i, class: [
-                        `${mergedClsPrefix}-date-panel-date`,
-                        {
-                            [`${mergedClsPrefix}-date-panel-date--excluded`]: !dateItem.inCurrentMonth,
-                            [`${mergedClsPrefix}-date-panel-date--current`]: dateItem.isCurrentDate,
-                            [`${mergedClsPrefix}-date-panel-date--selected`]: dateItem.selected,
-                            [`${mergedClsPrefix}-date-panel-date--covered`]: dateItem.inSpan,
-                            [`${mergedClsPrefix}-date-panel-date--start`]: dateItem.startOfSpan,
-                            [`${mergedClsPrefix}-date-panel-date--end`]: dateItem.endOfSpan,
-                            [`${mergedClsPrefix}-date-panel-date--disabled`]: this.mergedIsDateDisabled(dateItem.ts)
-                        }
-                    ], onClick: () => {
-                        this.handleDateClick(dateItem);
-                    }, onMouseenter: () => {
-                        this.handleDateMouseEnter(dateItem);
-                    } },
-                    h("div", { class: `${mergedClsPrefix}-date-panel-date__trigger` }),
-                    dateItem.dateObject.date))))),
+                h(PanelHeader, { value: this.endCalendarDateTime, mergedClsPrefix: mergedClsPrefix, isMonth: isMonthRange, isYear: isYearRange, calendarMonth: this.endCalendarMonth, calendarYear: this.endCalendarYear, onUpdateMonth: handleMonthEndClick, onUpdateYear: handleYearEndClick }),
+                isWithoutDay ? (h("div", { class: `${mergedClsPrefix}-date-panel-placeholder` })) : (h(Fragment, null,
+                    h("div", { class: `${mergedClsPrefix}-date-panel-weekdays` }, this.weekdays.map((weekday) => (h("div", { key: weekday, class: `${mergedClsPrefix}-date-panel-weekdays__day` }, weekday)))),
+                    h("div", { class: `${mergedClsPrefix}-date-panel-dates` }, this.endDateArray.map((dateItem, i) => (h("div", { "data-u-date": true, key: i, class: [
+                            `${mergedClsPrefix}-date-panel-date`,
+                            {
+                                [`${mergedClsPrefix}-date-panel-date--excluded`]: !dateItem.inCurrentMonth,
+                                [`${mergedClsPrefix}-date-panel-date--current`]: dateItem.isCurrentDate,
+                                [`${mergedClsPrefix}-date-panel-date--selected`]: dateItem.selected,
+                                [`${mergedClsPrefix}-date-panel-date--covered`]: dateItem.inSpan,
+                                [`${mergedClsPrefix}-date-panel-date--start`]: dateItem.startOfSpan,
+                                [`${mergedClsPrefix}-date-panel-date--end`]: dateItem.endOfSpan,
+                                [`${mergedClsPrefix}-date-panel-date--disabled`]: this.mergedIsDateDisabled(dateItem.ts)
+                            }
+                        ], onClick: () => {
+                            this.handleDateClick(dateItem);
+                        }, onMouseenter: () => {
+                            this.handleDateMouseEnter(dateItem);
+                        } },
+                        h("div", { class: `${mergedClsPrefix}-date-panel-date__trigger` }),
+                        dateItem.dateObject.date))))))),
             this.datePickerSlots.footer ? (h("div", { class: `${mergedClsPrefix}-date-panel-footer` }, this.datePickerSlots.footer())) : null,
             ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) || shortcuts ? (h("div", { class: `${mergedClsPrefix}-date-panel-actions` },
                 h("div", { class: `${mergedClsPrefix}-date-panel-actions__prefix` }, shortcuts &&

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

@@ -11,6 +11,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly active: BooleanConstructor;
     readonly dateFormat: StringConstructor;
+    readonly type: import("vue").PropType<import("../config").DatePickerType>;
     readonly timeFormat: {
         readonly type: StringConstructor;
         readonly value: "HH:mm:ss";
@@ -33,7 +34,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onRender: import("vue").PropType<(() => void) | undefined>;
     readonly panel: BooleanConstructor;
 }, {
-    handleDateClick: (dateItem: import("../utils").DateItem | import("../utils").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;
@@ -1224,6 +1225,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     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/datetimerange.d.ts

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