naive-ui 2.24.3 → 2.24.7

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/dialog/src/Dialog.js

@@ -110,7 +110,6 @@ export default defineComponent({
     },
     render() {
         const { $slots, bordered, mergedIconPlacement, cssVars, closable, showIcon, title, content, action, negativeText, positiveText, handlePositiveClick, handleNegativeClick, mergedTheme, loading, type, mergedClsPrefix } = this;
-        console.log('action', $slots.action);
         return (h("div", { class: [
                 `${mergedClsPrefix}-dialog`,
                 `${mergedClsPrefix}-dialog--icon-${mergedIconPlacement}`,

package/es/dynamic-input/src/DynamicInput.d.ts

@@ -34,16 +34,8 @@ declare const dynamicInputProps: {
     readonly onRemove: PropType<(index: number) => void>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
-    readonly onClear: {
-        readonly type: PropType<() => void>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onInput: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onClear: PropType<() => void>;
+    readonly onInput: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"DynamicInput", {
         actionMargin: string;
     }, {
@@ -883,16 +875,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly onRemove: PropType<(index: number) => void>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
-    readonly onClear: {
-        readonly type: PropType<() => void>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onInput: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onClear: PropType<() => void>;
+    readonly onInput: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"DynamicInput", {
         actionMargin: string;
     }, {
@@ -2135,16 +2119,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly onRemove: PropType<(index: number) => void>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
-    readonly onClear: {
-        readonly type: PropType<() => void>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onInput: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onClear: PropType<() => void>;
+    readonly onInput: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"DynamicInput", {
         actionMargin: string;
     }, {
@@ -2950,10 +2926,8 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }>>, {
-    onInput: MaybeArray<OnUpdateValue> | undefined;
     placeholder: string;
     min: number;
-    onClear: () => void;
     defaultValue: any[];
     preset: "input" | "pair";
     keyPlaceholder: string;

package/es/dynamic-input/src/DynamicInput.js

@@ -1,11 +1,11 @@
-import { h, ref, toRef, isProxy, toRaw, computed, defineComponent, inject, provide } from 'vue';
+import { h, ref, toRef, isProxy, toRaw, computed, defineComponent, inject, provide, watchEffect } from 'vue';
 import { useMergedState } from 'vooks';
 import { createId } from 'seemly';
 import { RemoveIcon, AddIcon } from '../../_internal/icons';
 import { NBaseIcon } from '../../_internal';
 import { NButton, NButtonGroup } from '../../button';
 import { useTheme, useLocale, useConfig } from '../../_mixins';
-import { warn, call } from '../../_utils';
+import { call, warnOnce } from '../../_utils';
 import { formItemInjectionKey } from '../../_mixins/use-form-item';
 import { dynamicInputLight } from '../styles';
 import NDynamicInputInputPreset from './InputPreset';
@@ -39,27 +39,21 @@ const dynamicInputProps = Object.assign(Object.assign({}, useTheme.props), { max
         default: ''
     }, onCreate: Function, onRemove: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
     // deprecated
-    onClear: {
-        type: Function,
-        validator: () => {
-            warn('dynamic-input', '`on-clear` is deprecated, it is out of usage anymore.');
-            return true;
-        },
-        default: undefined
-    }, onInput: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('dynamic-input', '`on-input` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onClear: Function, onInput: [Function, Array] });
 export default defineComponent({
     name: 'DynamicInput',
     props: dynamicInputProps,
     setup(props, { slots }) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.onClear !== undefined) {
+                    warnOnce('dynamic-input', '`on-clear` is deprecated, it is out of usage anymore.');
+                }
+                if (props.onInput !== undefined) {
+                    warnOnce('dynamic-input', '`on-input` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { NConfigProvider, mergedClsPrefixRef } = useConfig();
         const NFormItem = inject(formItemInjectionKey, null);
         const uncontrolledValueRef = ref(props.defaultValue);
@@ -201,7 +195,7 @@ export default defineComponent({
     },
     render() {
         const { buttonSize, mergedClsPrefix, mergedValue, locale, mergedTheme, keyField, $slots, preset, itemStyle, NFormItem, ensureKey, handleValueChange, remove, createItem } = this;
-        return (h("div", { class: `${mergedClsPrefix}-dynamic-input`, style: this.cssVars }, !Array.isArray(mergedValue) || mergedValue.length === 0 ? (h(NButton, { block: true, ghost: true, dashed: true, size: buttonSize, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.handleCreateClick }, {
+        return (h("div", { class: `${mergedClsPrefix}-dynamic-input`, style: this.cssVars }, !Array.isArray(mergedValue) || mergedValue.length === 0 ? (h(NButton, { block: true, ghost: true, dashed: true, disabled: this.insertionDisabled, size: buttonSize, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.handleCreateClick }, {
             default: () => locale.create,
             icon: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(AddIcon, null) }))
         })) : (mergedValue.map((_, index) => (h("div", { key: keyField ? _[keyField] : ensureKey(_, index), "data-key": keyField ? _[keyField] : ensureKey(_, index), class: `${mergedClsPrefix}-dynamic-input-item`, style: itemStyle },

package/es/icon/src/Icon.d.ts

@@ -1,9 +1,10 @@
-import { PropType } from 'vue';
+import { Component, PropType } from 'vue';
 export declare type Depth = 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5' | undefined;
 declare const _default: import("vue").DefineComponent<{
     depth: PropType<Depth>;
     size: (StringConstructor | NumberConstructor)[];
     color: StringConstructor;
+    component: PropType<Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
     theme: PropType<import("../../_mixins").Theme<"Icon", {
         color: string;
         opacity1Depth: string;
@@ -47,6 +48,7 @@ declare const _default: import("vue").DefineComponent<{
     depth: PropType<Depth>;
     size: (StringConstructor | NumberConstructor)[];
     color: StringConstructor;
+    component: PropType<Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
     theme: PropType<import("../../_mixins").Theme<"Icon", {
         color: string;
         opacity1Depth: string;

package/es/icon/src/Icon.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, computed, mergeProps } from 'vue';
+import { computed, defineComponent, h, mergeProps } from 'vue';
 import { useConfig, useTheme } from '../../_mixins';
 import { formatLength, warn } from '../../_utils';
 import { iconLight } from '../styles';
@@ -7,7 +7,7 @@ export default defineComponent({
     _n_icon__: true,
     name: 'Icon',
     inheritAttrs: false,
-    props: Object.assign(Object.assign({}, useTheme.props), { depth: [String, Number], size: [Number, String], color: String }),
+    props: Object.assign(Object.assign({}, useTheme.props), { depth: [String, Number], size: [Number, String], color: String, component: Object }),
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
         const themeRef = useTheme('Icon', 'Icon', style, iconLight, props, mergedClsPrefixRef);
@@ -39,7 +39,7 @@ export default defineComponent({
     },
     render() {
         var _a;
-        const { $parent, depth, mergedClsPrefix } = this;
+        const { $parent, depth, mergedClsPrefix, component } = this;
         if ((_a = $parent === null || $parent === void 0 ? void 0 : $parent.$options) === null || _a === void 0 ? void 0 : _a._n_icon__) {
             warn('icon', "don't wrap `n-icon` inside `n-icon`");
         }
@@ -53,6 +53,6 @@ export default defineComponent({
                 }
             ],
             style: Object.assign(this.cssVars, this.mergedStyle)
-        }), this.$slots);
+        }), component ? h(component) : this.$slots);
     }
 });

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;