naive-ui 2.24.4 → 2.24.5

package/es/color-picker/src/ColorPicker.d.ts

@@ -30,6 +30,10 @@ export declare const colorPickerPanelProps: {
     };
     readonly showPreview: BooleanConstructor;
     readonly swatches: PropType<string[]>;
+    readonly disabled: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
     readonly actions: {
         readonly type: PropType<"confirm"[]>;
         readonly default: null;
@@ -914,6 +918,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly showPreview: BooleanConstructor;
     readonly swatches: PropType<string[]>;
+    readonly disabled: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
     readonly actions: {
         readonly type: PropType<"confirm"[]>;
         readonly default: null;
@@ -1773,6 +1781,7 @@ declare const _default: import("vue").DefineComponent<{
     hsla: ComputedRef<HSLA | null>;
     rgba: ComputedRef<RGBA | null>;
     mergedShow: ComputedRef<boolean>;
+    mergedDisabled: ComputedRef<boolean>;
     isMounted: Readonly<Ref<boolean>>;
     adjustedTo: ComputedRef<string | HTMLElement>;
     mergedValue: ComputedRef<string | null>;
@@ -1816,6 +1825,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly showPreview: BooleanConstructor;
     readonly swatches: PropType<string[]>;
+    readonly disabled: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
     readonly actions: {
         readonly type: PropType<"confirm"[]>;
         readonly default: null;
@@ -2670,6 +2683,7 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }>>, {
     show: boolean | undefined;
+    disabled: boolean | undefined;
     to: string | boolean | HTMLElement;
     defaultShow: boolean;
     showAlpha: boolean;

package/es/color-picker/src/ColorPicker.js

@@ -29,7 +29,10 @@ export const colorPickerPanelProps = Object.assign(Object.assign({}, useTheme.pr
     }, to: useAdjustedTo.propTo, showAlpha: {
         type: Boolean,
         default: true
-    }, showPreview: Boolean, swatches: Array, actions: {
+    }, showPreview: Boolean, swatches: Array, disabled: {
+        type: Boolean,
+        default: undefined
+    }, actions: {
         type: Array,
         default: null
     }, internalActions: Array, size: String, renderLabel: Function, onComplete: Function, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
@@ -41,7 +44,7 @@ export default defineComponent({
         const selfRef = ref(null);
         let upcomingValue = null;
         const formItem = useFormItem(props);
-        const { mergedSizeRef } = formItem;
+        const { mergedSizeRef, mergedDisabledRef } = formItem;
         const { localeRef } = useLocale('global');
         const { mergedClsPrefixRef, namespaceRef } = useConfig(props);
         const themeRef = useTheme('ColorPicker', 'ColorPicker', style, colorPickerLight, props, mergedClsPrefixRef);
@@ -377,6 +380,7 @@ export default defineComponent({
             hsla: hslaRef,
             rgba: rgbaRef,
             mergedShow: mergedShowRef,
+            mergedDisabled: mergedDisabledRef,
             isMounted: useIsMounted(),
             adjustedTo: useAdjustedTo(props),
             mergedValue: mergedValueRef,
@@ -399,7 +403,7 @@ export default defineComponent({
             h(VBinder, null, {
                 default: () => [
                     h(VTarget, null, {
-                        default: () => (h(ColorPickerTrigger, { clsPrefix: mergedClsPrefix, value: this.mergedValue, hsla: this.hsla, onClick: this.handleTriggerClick }, {
+                        default: () => (h(ColorPickerTrigger, { clsPrefix: mergedClsPrefix, value: this.mergedValue, hsla: this.hsla, disabled: this.mergedDisabled, onClick: this.handleTriggerClick }, {
                             label: $slots.label
                         }))
                     }),

package/es/color-picker/src/ColorPickerTrigger.d.ts

@@ -13,6 +13,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HSLA | null>;
         default: null;
     };
+    disabled: BooleanConstructor;
     onClick: PropType<() => void>;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     clsPrefix: {
@@ -27,9 +28,11 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HSLA | null>;
         default: null;
     };
+    disabled: BooleanConstructor;
     onClick: PropType<() => void>;
 }>>, {
     value: string | null;
+    disabled: boolean;
     hsla: HSLA | null;
 }>;
 export default _default;

package/es/color-picker/src/ColorPickerTrigger.js

@@ -16,15 +16,19 @@ export default defineComponent({
             type: Array,
             default: null
         },
+        disabled: Boolean,
         onClick: Function
     },
     setup(props) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const { colorPickerSlots, renderLabelRef } = inject(colorPickerInjectionKey, null);
         return () => {
-            const { hsla, value, clsPrefix, onClick } = props;
+            const { hsla, value, clsPrefix, onClick, disabled } = props;
             const renderLabel = colorPickerSlots.label || renderLabelRef.value;
-            return (h("div", { class: `${clsPrefix}-color-picker-trigger`, onClick: onClick },
+            return (h("div", { class: [
+                    `${clsPrefix}-color-picker-trigger`,
+                    disabled && `${clsPrefix}-color-picker-trigger--disabled`
+                ], onClick: disabled ? undefined : onClick },
                 h("div", { class: `${clsPrefix}-color-picker-trigger__fill` },
                     h("div", { class: `${clsPrefix}-color-picker-checkboard` }),
                     h("div", { style: {

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

@@ -151,7 +151,7 @@ export default c([cB('color-picker', `
  right: 4px;
  top: 4px;
  bottom: 4px;
- `), cB('color-picker-checkboard', `
+ `), cM('disabled', 'cursor: not-allowed'), cB('color-picker-checkboard', `
  border-radius: var(--n-border-radius);
  `, [c('&::after', `
  --n-block-size: calc((var(--n-height) - 8px) / 3);

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

@@ -78,6 +78,7 @@ declare const datePickerProps: {
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -689,6 +690,7 @@ declare const datePickerProps: {
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -1300,6 +1302,7 @@ declare const datePickerProps: {
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -1972,6 +1975,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -2583,6 +2587,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -3194,6 +3199,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -3974,6 +3980,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;
@@ -4875,6 +4882,7 @@ declare const _default: import("vue").DefineComponent<{
         '--n-panel-header-divider-color': string;
         '--n-calendar-left-padding': string;
         '--n-calendar-right-padding': string;
+        '--n-calendar-title-color-hover': string;
         '--n-calendar-title-height': string;
         '--n-calendar-title-padding': string;
         '--n-calendar-title-font-size': string;
@@ -4986,6 +4994,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -5597,6 +5606,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -6208,6 +6218,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;

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

@@ -510,7 +510,7 @@ export default defineComponent({
                 };
             }), cssVars: computed(() => {
                 const { type } = props;
-                const { common: { cubicBezierEaseInOut }, self: { calendarTitleFontSize, calendarDaysFontSize, itemFontSize, itemTextColor, itemColorDisabled, itemColorIncluded, itemColorHover, itemColorActive, itemBorderRadius, itemTextColorDisabled, itemTextColorActive, panelColor, panelTextColor, arrowColor, calendarTitleTextColor, panelActionDividerColor, panelHeaderDividerColor, calendarDaysDividerColor, panelBoxShadow, panelBorderRadius, calendarTitleFontWeight, panelExtraFooterPadding, panelActionPadding, itemSize, itemCellWidth, itemCellHeight, scrollItemWidth, scrollItemHeight, calendarTitlePadding, calendarTitleHeight, calendarDaysHeight, calendarDaysTextColor, arrowSize, panelHeaderPadding, calendarDividerColor, calendarTitleGridTempateColumns, iconColor, iconColorDisabled, scrollItemBorderRadius, [createKey('calendarLeftPadding', type)]: calendarLeftPadding, [createKey('calendarRightPadding', type)]: calendarRightPadding } } = themeRef.value;
+                const { common: { cubicBezierEaseInOut }, self: { calendarTitleFontSize, calendarDaysFontSize, itemFontSize, itemTextColor, itemColorDisabled, itemColorIncluded, itemColorHover, itemColorActive, itemBorderRadius, itemTextColorDisabled, itemTextColorActive, panelColor, panelTextColor, arrowColor, calendarTitleTextColor, panelActionDividerColor, panelHeaderDividerColor, calendarDaysDividerColor, panelBoxShadow, panelBorderRadius, calendarTitleFontWeight, panelExtraFooterPadding, panelActionPadding, itemSize, itemCellWidth, itemCellHeight, scrollItemWidth, scrollItemHeight, calendarTitlePadding, calendarTitleHeight, calendarDaysHeight, calendarDaysTextColor, arrowSize, panelHeaderPadding, calendarDividerColor, calendarTitleGridTempateColumns, iconColor, iconColorDisabled, scrollItemBorderRadius, calendarTitleColorHover, [createKey('calendarLeftPadding', type)]: calendarLeftPadding, [createKey('calendarRightPadding', type)]: calendarRightPadding } } = themeRef.value;
                 return {
                     '--n-bezier': cubicBezierEaseInOut,
                     '--n-panel-border-radius': panelBorderRadius,
@@ -523,6 +523,7 @@ export default defineComponent({
                     // panel calendar
                     '--n-calendar-left-padding': calendarLeftPadding,
                     '--n-calendar-right-padding': calendarRightPadding,
+                    '--n-calendar-title-color-hover': calendarTitleColorHover,
                     '--n-calendar-title-height': calendarTitleHeight,
                     '--n-calendar-title-padding': calendarTitlePadding,
                     '--n-calendar-title-font-size': calendarTitleFontSize,

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

@@ -192,6 +192,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -178,6 +178,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -186,6 +186,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -178,6 +178,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -194,6 +194,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -271,6 +271,7 @@ declare const _default: import("vue").DefineComponent<{
                     panelTextColor: string;
                     arrowColor: string;
                     calendarTitleTextColor: string;
+                    calendarTitleColorHover: string;
                     calendarDaysTextColor: string;
                     panelHeaderDividerColor: string;
                     calendarDaysDividerColor: string;
@@ -1449,6 +1450,7 @@ declare const _default: import("vue").DefineComponent<{
                 panelTextColor: string;
                 arrowColor: string;
                 calendarTitleTextColor: string;
+                calendarTitleColorHover: string;
                 calendarDaysTextColor: string;
                 panelHeaderDividerColor: string;
                 calendarDaysDividerColor: string;

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

@@ -53,9 +53,13 @@ export default defineComponent({
             h(VBinder, null, {
                 default: () => [
                     h(VTarget, null, {
-                        default: () => (h("div", { class: `${mergedClsPrefix}-date-panel-month__text`, onClick: this.handleHeaderClick }, this.monthBeforeYear
-                            ? [this.calendarMonth, this.calendarYear]
-                            : [this.calendarYear, this.calendarMonth]))
+                        default: () => (h("div", { class: [
+                                `${mergedClsPrefix}-date-panel-month__text`,
+                                this.show &&
+                                    `${mergedClsPrefix}-date-panel-month__text--active`
+                            ], onClick: this.handleHeaderClick }, this.monthBeforeYear
+                            ? [this.calendarMonth, ' ', this.calendarYear]
+                            : [this.calendarYear, ' ', this.calendarMonth]))
                     }),
                     h(VFollower, { show: this.show, teleportDisabled: true }, {
                         default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: true }, {

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

@@ -190,6 +190,7 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -182,6 +182,7 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -144,6 +144,7 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -13,6 +13,7 @@ import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-
 // panel calendar
 // --n-calendar-left-padding
 // --n-calendar-right-padding
+// --n-calendar-title-color-hover
 // --n-calendar-title-height
 // --n-calendar-title-padding
 // --n-calendar-title-font-size
@@ -185,16 +186,24 @@ export default c([cB('date-picker', `
  height: var(--n-arrow-size);
  color: var(--n-arrow-color);
  `), cE('month-year', `
+ user-select: none;
  flex-grow: 1;
  position: relative;
  `, [cE('text', `
  font-size: var(--n-calendar-title-font-size);
+ line-height: var(--n-calendar-title-font-size);
  font-weight: var(--n-calendar-title-font-weight);
- line-height: 17px;
+ padding: 6px 8px;
  text-align: center;
  color: var(--n-calendar-title-text-color);
  cursor: pointer;
- `)])]), cB('date-panel-weekdays', `
+ transition: background-color .3s var(--n-bezier);
+ border-radius: var(--n-panel-border-radius);
+ `, [cM('active', `
+ background-color: var(--n-calendar-title-color-hover);
+ `), c('&:hover', `
+ background-color: var(--n-calendar-title-color-hover);
+ `)])])]), cB('date-panel-weekdays', `
  display: grid;
  margin: auto;
  grid-template-columns: repeat(7, var(--n-item-cell-width));
@@ -204,6 +213,7 @@ export default c([cB('date-picker', `
  margin-bottom: 4px;
  border-bottom: 1px solid var(--n-calendar-days-divider-color);
  `, [cE('day', `
+ user-select: none;
  line-height: 15px;
  width: var(--n-item-size);
  text-align: center;
@@ -218,6 +228,7 @@ export default c([cB('date-picker', `
  justify-items: center;
  flex-wrap: wrap;
  `, [cB('date-panel-date', `
+ user-select: none;
  position: relative;
  width: var(--n-item-size);
  height: var(--n-item-size);

package/es/date-picker/styles/light.d.ts

@@ -16,6 +16,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     panelTextColor: string;
     arrowColor: string;
     calendarTitleTextColor: string;
+    calendarTitleColorHover: string;
     calendarDaysTextColor: string;
     panelHeaderDividerColor: string;
     calendarDaysDividerColor: string;
@@ -73,6 +74,7 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
     panelTextColor: string;
     arrowColor: string;
     calendarTitleTextColor: string;
+    calendarTitleColorHover: string;
     calendarDaysTextColor: string;
     panelHeaderDividerColor: string;
     calendarDaysDividerColor: string;

package/es/date-picker/styles/light.js

@@ -8,7 +8,7 @@ import commonVars from './_common';
 import { createTheme } from '../../_mixins';
 export const self = (vars) => {
     const { hoverColor, fontSize, textColor2, textColorDisabled, popoverColor, primaryColor, borderRadiusSmall, iconColor, iconColorDisabled, textColor1, dividerColor, boxShadow2, borderRadius, fontWeightStrong } = vars;
-    return Object.assign(Object.assign({}, commonVars), { itemFontSize: fontSize, calendarDaysFontSize: fontSize, calendarTitleFontSize: fontSize, itemTextColor: textColor2, itemTextColorDisabled: textColorDisabled, itemTextColorActive: popoverColor, itemTextColorCurrent: primaryColor, itemColorIncluded: changeColor(primaryColor, { alpha: 0.1 }), itemColorHover: hoverColor, itemColorDisabled: hoverColor, itemColorActive: primaryColor, itemBorderRadius: borderRadiusSmall, panelColor: popoverColor, panelTextColor: textColor2, arrowColor: iconColor, calendarTitleTextColor: textColor1, calendarDaysTextColor: textColor2, panelHeaderDividerColor: dividerColor, calendarDaysDividerColor: dividerColor, calendarDividerColor: dividerColor, panelActionDividerColor: dividerColor, panelBoxShadow: boxShadow2, panelBorderRadius: borderRadius, calendarTitleFontWeight: fontWeightStrong, scrollItemBorderRadius: borderRadius, iconColor,
+    return Object.assign(Object.assign({}, commonVars), { itemFontSize: fontSize, calendarDaysFontSize: fontSize, calendarTitleFontSize: fontSize, itemTextColor: textColor2, itemTextColorDisabled: textColorDisabled, itemTextColorActive: popoverColor, itemTextColorCurrent: primaryColor, itemColorIncluded: changeColor(primaryColor, { alpha: 0.1 }), itemColorHover: hoverColor, itemColorDisabled: hoverColor, itemColorActive: primaryColor, itemBorderRadius: borderRadiusSmall, panelColor: popoverColor, panelTextColor: textColor2, arrowColor: iconColor, calendarTitleTextColor: textColor1, calendarTitleColorHover: hoverColor, calendarDaysTextColor: textColor2, panelHeaderDividerColor: dividerColor, calendarDaysDividerColor: dividerColor, calendarDividerColor: dividerColor, panelActionDividerColor: dividerColor, panelBoxShadow: boxShadow2, panelBorderRadius: borderRadius, calendarTitleFontWeight: fontWeightStrong, scrollItemBorderRadius: borderRadius, iconColor,
         iconColorDisabled });
 };
 const datePickerLight = createTheme({

package/es/input/src/styles/input.cssr.js

@@ -146,6 +146,7 @@ cE('textarea', `
  line-height: var(--n-line-height-textarea);
  margin: 0;
  resize: none;
+ white-space: pre-wrap;
  `), cE('textarea-mirror', `
  pointer-events: none;
  overflow: hidden;

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.24.4";
+declare const _default: "2.24.5";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '2.24.4';
+export default '2.24.5';

package/lib/color-picker/src/ColorPicker.d.ts

@@ -30,6 +30,10 @@ export declare const colorPickerPanelProps: {
     };
     readonly showPreview: BooleanConstructor;
     readonly swatches: PropType<string[]>;
+    readonly disabled: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
     readonly actions: {
         readonly type: PropType<"confirm"[]>;
         readonly default: null;
@@ -914,6 +918,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly showPreview: BooleanConstructor;
     readonly swatches: PropType<string[]>;
+    readonly disabled: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
     readonly actions: {
         readonly type: PropType<"confirm"[]>;
         readonly default: null;
@@ -1773,6 +1781,7 @@ declare const _default: import("vue").DefineComponent<{
     hsla: ComputedRef<HSLA | null>;
     rgba: ComputedRef<RGBA | null>;
     mergedShow: ComputedRef<boolean>;
+    mergedDisabled: ComputedRef<boolean>;
     isMounted: Readonly<Ref<boolean>>;
     adjustedTo: ComputedRef<string | HTMLElement>;
     mergedValue: ComputedRef<string | null>;
@@ -1816,6 +1825,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly showPreview: BooleanConstructor;
     readonly swatches: PropType<string[]>;
+    readonly disabled: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
     readonly actions: {
         readonly type: PropType<"confirm"[]>;
         readonly default: null;
@@ -2670,6 +2683,7 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }>>, {
     show: boolean | undefined;
+    disabled: boolean | undefined;
     to: string | boolean | HTMLElement;
     defaultShow: boolean;
     showAlpha: boolean;

package/lib/color-picker/src/ColorPicker.js

@@ -35,7 +35,10 @@ exports.colorPickerPanelProps = Object.assign(Object.assign({}, _mixins_1.useThe
     }, to: _utils_1.useAdjustedTo.propTo, showAlpha: {
         type: Boolean,
         default: true
-    }, showPreview: Boolean, swatches: Array, actions: {
+    }, showPreview: Boolean, swatches: Array, disabled: {
+        type: Boolean,
+        default: undefined
+    }, actions: {
         type: Array,
         default: null
     }, internalActions: Array, size: String, renderLabel: Function, onComplete: Function, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
@@ -47,7 +50,7 @@ exports.default = (0, vue_1.defineComponent)({
         const selfRef = (0, vue_1.ref)(null);
         let upcomingValue = null;
         const formItem = (0, _mixins_1.useFormItem)(props);
-        const { mergedSizeRef } = formItem;
+        const { mergedSizeRef, mergedDisabledRef } = formItem;
         const { localeRef } = (0, _mixins_1.useLocale)('global');
         const { mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('ColorPicker', 'ColorPicker', index_cssr_1.default, styles_1.colorPickerLight, props, mergedClsPrefixRef);
@@ -383,6 +386,7 @@ exports.default = (0, vue_1.defineComponent)({
             hsla: hslaRef,
             rgba: rgbaRef,
             mergedShow: mergedShowRef,
+            mergedDisabled: mergedDisabledRef,
             isMounted: (0, vooks_1.useIsMounted)(),
             adjustedTo: (0, _utils_1.useAdjustedTo)(props),
             mergedValue: mergedValueRef,
@@ -405,7 +409,7 @@ exports.default = (0, vue_1.defineComponent)({
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
                     (0, vue_1.h)(vueuc_1.VTarget, null, {
-                        default: () => ((0, vue_1.h)(ColorPickerTrigger_1.default, { clsPrefix: mergedClsPrefix, value: this.mergedValue, hsla: this.hsla, onClick: this.handleTriggerClick }, {
+                        default: () => ((0, vue_1.h)(ColorPickerTrigger_1.default, { clsPrefix: mergedClsPrefix, value: this.mergedValue, hsla: this.hsla, disabled: this.mergedDisabled, onClick: this.handleTriggerClick }, {
                             label: $slots.label
                         }))
                     }),

package/lib/color-picker/src/ColorPickerTrigger.d.ts

@@ -13,6 +13,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HSLA | null>;
         default: null;
     };
+    disabled: BooleanConstructor;
     onClick: PropType<() => void>;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     clsPrefix: {
@@ -27,9 +28,11 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HSLA | null>;
         default: null;
     };
+    disabled: BooleanConstructor;
     onClick: PropType<() => void>;
 }>>, {
     value: string | null;
+    disabled: boolean;
     hsla: HSLA | null;
 }>;
 export default _default;

package/lib/color-picker/src/ColorPickerTrigger.js

@@ -18,15 +18,19 @@ exports.default = (0, vue_1.defineComponent)({
             type: Array,
             default: null
         },
+        disabled: Boolean,
         onClick: Function
     },
     setup(props) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const { colorPickerSlots, renderLabelRef } = (0, vue_1.inject)(ColorPicker_1.colorPickerInjectionKey, null);
         return () => {
-            const { hsla, value, clsPrefix, onClick } = props;
+            const { hsla, value, clsPrefix, onClick, disabled } = props;
             const renderLabel = colorPickerSlots.label || renderLabelRef.value;
-            return ((0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-trigger`, onClick: onClick },
+            return ((0, vue_1.h)("div", { class: [
+                    `${clsPrefix}-color-picker-trigger`,
+                    disabled && `${clsPrefix}-color-picker-trigger--disabled`
+                ], onClick: disabled ? undefined : onClick },
                 (0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-trigger__fill` },
                     (0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-checkboard` }),
                     (0, vue_1.h)("div", { style: {

package/lib/color-picker/src/styles/index.cssr.js

@@ -165,7 +165,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('color-picker', `
  right: 4px;
  top: 4px;
  bottom: 4px;
- `), (0, cssr_1.cB)('color-picker-checkboard', `
+ `), (0, cssr_1.cM)('disabled', 'cursor: not-allowed'), (0, cssr_1.cB)('color-picker-checkboard', `
  border-radius: var(--n-border-radius);
  `, [(0, cssr_1.c)('&::after', `
  --n-block-size: calc((var(--n-height) - 8px) / 3);

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

@@ -78,6 +78,7 @@ declare const datePickerProps: {
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -689,6 +690,7 @@ declare const datePickerProps: {
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -1300,6 +1302,7 @@ declare const datePickerProps: {
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -1972,6 +1975,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -2583,6 +2587,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -3194,6 +3199,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -3974,6 +3980,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;
@@ -4875,6 +4882,7 @@ declare const _default: import("vue").DefineComponent<{
         '--n-panel-header-divider-color': string;
         '--n-calendar-left-padding': string;
         '--n-calendar-right-padding': string;
+        '--n-calendar-title-color-hover': string;
         '--n-calendar-title-height': string;
         '--n-calendar-title-padding': string;
         '--n-calendar-title-font-size': string;
@@ -4986,6 +4994,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -5597,6 +5606,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;
@@ -6208,6 +6218,7 @@ declare const _default: import("vue").DefineComponent<{
         panelTextColor: string;
         arrowColor: string;
         calendarTitleTextColor: string;
+        calendarTitleColorHover: string;
         calendarDaysTextColor: string;
         panelHeaderDividerColor: string;
         calendarDaysDividerColor: string;

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

@@ -515,7 +515,7 @@ exports.default = (0, vue_1.defineComponent)({
                 };
             }), cssVars: (0, vue_1.computed)(() => {
                 const { type } = props;
-                const { common: { cubicBezierEaseInOut }, self: { calendarTitleFontSize, calendarDaysFontSize, itemFontSize, itemTextColor, itemColorDisabled, itemColorIncluded, itemColorHover, itemColorActive, itemBorderRadius, itemTextColorDisabled, itemTextColorActive, panelColor, panelTextColor, arrowColor, calendarTitleTextColor, panelActionDividerColor, panelHeaderDividerColor, calendarDaysDividerColor, panelBoxShadow, panelBorderRadius, calendarTitleFontWeight, panelExtraFooterPadding, panelActionPadding, itemSize, itemCellWidth, itemCellHeight, scrollItemWidth, scrollItemHeight, calendarTitlePadding, calendarTitleHeight, calendarDaysHeight, calendarDaysTextColor, arrowSize, panelHeaderPadding, calendarDividerColor, calendarTitleGridTempateColumns, iconColor, iconColorDisabled, scrollItemBorderRadius, [(0, _utils_1.createKey)('calendarLeftPadding', type)]: calendarLeftPadding, [(0, _utils_1.createKey)('calendarRightPadding', type)]: calendarRightPadding } } = themeRef.value;
+                const { common: { cubicBezierEaseInOut }, self: { calendarTitleFontSize, calendarDaysFontSize, itemFontSize, itemTextColor, itemColorDisabled, itemColorIncluded, itemColorHover, itemColorActive, itemBorderRadius, itemTextColorDisabled, itemTextColorActive, panelColor, panelTextColor, arrowColor, calendarTitleTextColor, panelActionDividerColor, panelHeaderDividerColor, calendarDaysDividerColor, panelBoxShadow, panelBorderRadius, calendarTitleFontWeight, panelExtraFooterPadding, panelActionPadding, itemSize, itemCellWidth, itemCellHeight, scrollItemWidth, scrollItemHeight, calendarTitlePadding, calendarTitleHeight, calendarDaysHeight, calendarDaysTextColor, arrowSize, panelHeaderPadding, calendarDividerColor, calendarTitleGridTempateColumns, iconColor, iconColorDisabled, scrollItemBorderRadius, calendarTitleColorHover, [(0, _utils_1.createKey)('calendarLeftPadding', type)]: calendarLeftPadding, [(0, _utils_1.createKey)('calendarRightPadding', type)]: calendarRightPadding } } = themeRef.value;
                 return {
                     '--n-bezier': cubicBezierEaseInOut,
                     '--n-panel-border-radius': panelBorderRadius,
@@ -528,6 +528,7 @@ exports.default = (0, vue_1.defineComponent)({
                     // panel calendar
                     '--n-calendar-left-padding': calendarLeftPadding,
                     '--n-calendar-right-padding': calendarRightPadding,
+                    '--n-calendar-title-color-hover': calendarTitleColorHover,
                     '--n-calendar-title-height': calendarTitleHeight,
                     '--n-calendar-title-padding': calendarTitlePadding,
                     '--n-calendar-title-font-size': calendarTitleFontSize,

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

@@ -192,6 +192,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -178,6 +178,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -186,6 +186,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

package/lib/date-picker/src/panel/datetimerange.d.ts

@@ -178,6 +178,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

package/lib/date-picker/src/panel/month.d.ts

@@ -194,6 +194,7 @@ declare const _default: import("vue").DefineComponent<{
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -271,6 +271,7 @@ declare const _default: import("vue").DefineComponent<{
                     panelTextColor: string;
                     arrowColor: string;
                     calendarTitleTextColor: string;
+                    calendarTitleColorHover: string;
                     calendarDaysTextColor: string;
                     panelHeaderDividerColor: string;
                     calendarDaysDividerColor: string;
@@ -1449,6 +1450,7 @@ declare const _default: import("vue").DefineComponent<{
                 panelTextColor: string;
                 arrowColor: string;
                 calendarTitleTextColor: string;
+                calendarTitleColorHover: string;
                 calendarDaysTextColor: string;
                 panelHeaderDividerColor: string;
                 calendarDaysDividerColor: string;

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

@@ -58,9 +58,13 @@ exports.default = (0, vue_1.defineComponent)({
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
                     (0, vue_1.h)(vueuc_1.VTarget, null, {
-                        default: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__text`, onClick: this.handleHeaderClick }, this.monthBeforeYear
-                            ? [this.calendarMonth, this.calendarYear]
-                            : [this.calendarYear, this.calendarMonth]))
+                        default: () => ((0, vue_1.h)("div", { class: [
+                                `${mergedClsPrefix}-date-panel-month__text`,
+                                this.show &&
+                                    `${mergedClsPrefix}-date-panel-month__text--active`
+                            ], onClick: this.handleHeaderClick }, this.monthBeforeYear
+                            ? [this.calendarMonth, ' ', this.calendarYear]
+                            : [this.calendarYear, ' ', this.calendarMonth]))
                     }),
                     (0, vue_1.h)(vueuc_1.VFollower, { show: this.show, teleportDisabled: true }, {
                         default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: true }, {

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

@@ -190,6 +190,7 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -182,6 +182,7 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -144,6 +144,7 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
             panelTextColor: string;
             arrowColor: string;
             calendarTitleTextColor: string;
+            calendarTitleColorHover: string;
             calendarDaysTextColor: string;
             panelHeaderDividerColor: string;
             calendarDaysDividerColor: string;

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

@@ -26,6 +26,7 @@ const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transi
 // panel calendar
 // --n-calendar-left-padding
 // --n-calendar-right-padding
+// --n-calendar-title-color-hover
 // --n-calendar-title-height
 // --n-calendar-title-padding
 // --n-calendar-title-font-size
@@ -199,16 +200,24 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('date-picker', `
  height: var(--n-arrow-size);
  color: var(--n-arrow-color);
  `), (0, cssr_1.cE)('month-year', `
+ user-select: none;
  flex-grow: 1;
  position: relative;
  `, [(0, cssr_1.cE)('text', `
  font-size: var(--n-calendar-title-font-size);
+ line-height: var(--n-calendar-title-font-size);
  font-weight: var(--n-calendar-title-font-weight);
- line-height: 17px;
+ padding: 6px 8px;
  text-align: center;
  color: var(--n-calendar-title-text-color);
  cursor: pointer;
- `)])]), (0, cssr_1.cB)('date-panel-weekdays', `
+ transition: background-color .3s var(--n-bezier);
+ border-radius: var(--n-panel-border-radius);
+ `, [(0, cssr_1.cM)('active', `
+ background-color: var(--n-calendar-title-color-hover);
+ `), (0, cssr_1.c)('&:hover', `
+ background-color: var(--n-calendar-title-color-hover);
+ `)])])]), (0, cssr_1.cB)('date-panel-weekdays', `
  display: grid;
  margin: auto;
  grid-template-columns: repeat(7, var(--n-item-cell-width));
@@ -218,6 +227,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('date-picker', `
  margin-bottom: 4px;
  border-bottom: 1px solid var(--n-calendar-days-divider-color);
  `, [(0, cssr_1.cE)('day', `
+ user-select: none;
  line-height: 15px;
  width: var(--n-item-size);
  text-align: center;
@@ -232,6 +242,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('date-picker', `
  justify-items: center;
  flex-wrap: wrap;
  `, [(0, cssr_1.cB)('date-panel-date', `
+ user-select: none;
  position: relative;
  width: var(--n-item-size);
  height: var(--n-item-size);

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

@@ -16,6 +16,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     panelTextColor: string;
     arrowColor: string;
     calendarTitleTextColor: string;
+    calendarTitleColorHover: string;
     calendarDaysTextColor: string;
     panelHeaderDividerColor: string;
     calendarDaysDividerColor: string;
@@ -73,6 +74,7 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
     panelTextColor: string;
     arrowColor: string;
     calendarTitleTextColor: string;
+    calendarTitleColorHover: string;
     calendarDaysTextColor: string;
     panelHeaderDividerColor: string;
     calendarDaysDividerColor: string;

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

@@ -14,7 +14,7 @@ const _common_1 = __importDefault(require("./_common"));
 const _mixins_1 = require("../../_mixins");
 const self = (vars) => {
     const { hoverColor, fontSize, textColor2, textColorDisabled, popoverColor, primaryColor, borderRadiusSmall, iconColor, iconColorDisabled, textColor1, dividerColor, boxShadow2, borderRadius, fontWeightStrong } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { itemFontSize: fontSize, calendarDaysFontSize: fontSize, calendarTitleFontSize: fontSize, itemTextColor: textColor2, itemTextColorDisabled: textColorDisabled, itemTextColorActive: popoverColor, itemTextColorCurrent: primaryColor, itemColorIncluded: (0, seemly_1.changeColor)(primaryColor, { alpha: 0.1 }), itemColorHover: hoverColor, itemColorDisabled: hoverColor, itemColorActive: primaryColor, itemBorderRadius: borderRadiusSmall, panelColor: popoverColor, panelTextColor: textColor2, arrowColor: iconColor, calendarTitleTextColor: textColor1, calendarDaysTextColor: textColor2, panelHeaderDividerColor: dividerColor, calendarDaysDividerColor: dividerColor, calendarDividerColor: dividerColor, panelActionDividerColor: dividerColor, panelBoxShadow: boxShadow2, panelBorderRadius: borderRadius, calendarTitleFontWeight: fontWeightStrong, scrollItemBorderRadius: borderRadius, iconColor,
+    return Object.assign(Object.assign({}, _common_1.default), { itemFontSize: fontSize, calendarDaysFontSize: fontSize, calendarTitleFontSize: fontSize, itemTextColor: textColor2, itemTextColorDisabled: textColorDisabled, itemTextColorActive: popoverColor, itemTextColorCurrent: primaryColor, itemColorIncluded: (0, seemly_1.changeColor)(primaryColor, { alpha: 0.1 }), itemColorHover: hoverColor, itemColorDisabled: hoverColor, itemColorActive: primaryColor, itemBorderRadius: borderRadiusSmall, panelColor: popoverColor, panelTextColor: textColor2, arrowColor: iconColor, calendarTitleTextColor: textColor1, calendarTitleColorHover: hoverColor, calendarDaysTextColor: textColor2, panelHeaderDividerColor: dividerColor, calendarDaysDividerColor: dividerColor, calendarDividerColor: dividerColor, panelActionDividerColor: dividerColor, panelBoxShadow: boxShadow2, panelBorderRadius: borderRadius, calendarTitleFontWeight: fontWeightStrong, scrollItemBorderRadius: borderRadius, iconColor,
         iconColorDisabled });
 };
 exports.self = self;

package/lib/input/src/styles/input.cssr.js

@@ -153,6 +153,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('input', `
  line-height: var(--n-line-height-textarea);
  margin: 0;
  resize: none;
+ white-space: pre-wrap;
  `), (0, cssr_1.cE)('textarea-mirror', `
  pointer-events: none;
  overflow: hidden;

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.24.4";
+declare const _default: "2.24.5";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '2.24.4';
+exports.default = '2.24.5';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "2.24.4",
+  "version": "2.24.5",
   "description": "A Vue 3 Component Library. Fairly Complete, Customizable Themes, Uses TypeScript, Not Too Slow",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -66,7 +66,7 @@
     "codesandbox": "^2.2.3",
     "cross-env": "^7.0.3",
     "cssnano": "^5.0.5",
-    "esbuild": "0.14.12",
+    "esbuild": "0.14.13",
     "eslint": "^8.6.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-standard": "^16.0.2",
@@ -94,7 +94,7 @@
     "vite": "^2.1.3",
     "vue": "^3.2.12",
     "vue-router": "^4.0.5",
-    "vue-tsc": "^0.30.2"
+    "vue-tsc": "^0.31.1"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "naive-ui",
-  "version": "2.24.4",
+  "version": "2.24.5",
   "contributions": {
     "html": {
       "tags": [
@@ -1217,6 +1217,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "disabled",
+              "default": "-",
+              "description": "-",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "actions",
               "default": "-",