naive-ui 2.32.2 → 2.33.2

package/es/radio/src/RadioButton.d.ts

@@ -1,9 +1,9 @@
 import { ExtractPublicPropTypes } from '../../_utils';
-import useRadio from './use-radio';
+import { radioProps } from './use-radio';
 export declare const radioButtonProps: {
     readonly name: StringConstructor;
     readonly value: {
-        readonly type: import("vue").PropType<string | number>;
+        readonly type: import("vue").PropType<string | number | boolean>;
         readonly default: "on";
     };
     readonly checked: {
@@ -21,15 +21,14 @@ export declare const radioButtonProps: {
     readonly 'onUpdate:checked': import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     readonly checkedValue: {
         readonly type: import("vue").PropType<boolean | undefined>;
-        readonly validator: () => boolean;
         readonly default: undefined;
     };
 };
-export declare type RadioButtonProps = ExtractPublicPropTypes<typeof useRadio.props>;
+export declare type RadioButtonProps = ExtractPublicPropTypes<typeof radioProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly name: StringConstructor;
     readonly value: {
-        readonly type: import("vue").PropType<string | number>;
+        readonly type: import("vue").PropType<string | number | boolean>;
         readonly default: "on";
     };
     readonly checked: {
@@ -47,13 +46,12 @@ declare const _default: import("vue").DefineComponent<{
     readonly 'onUpdate:checked': import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     readonly checkedValue: {
         readonly type: import("vue").PropType<boolean | undefined>;
-        readonly validator: () => boolean;
         readonly default: undefined;
     };
 }, import("./use-radio").UseRadio, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly name: StringConstructor;
     readonly value: {
-        readonly type: import("vue").PropType<string | number>;
+        readonly type: import("vue").PropType<string | number | boolean>;
         readonly default: "on";
     };
     readonly checked: {
@@ -71,11 +69,10 @@ declare const _default: import("vue").DefineComponent<{
     readonly 'onUpdate:checked': import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     readonly checkedValue: {
         readonly type: import("vue").PropType<boolean | undefined>;
-        readonly validator: () => boolean;
         readonly default: undefined;
     };
 }>>, {
-    readonly value: string | number;
+    readonly value: string | number | boolean;
     readonly disabled: boolean | undefined;
     readonly checked: boolean | undefined;
     readonly defaultChecked: boolean;

package/es/radio/src/RadioButton.js

@@ -1,22 +1,18 @@
 import { h, defineComponent } from 'vue';
 import { resolveWrappedSlot } from '../../_utils';
-import useRadio from './use-radio';
-export const radioButtonProps = useRadio.props;
+import { setup, radioProps } from './use-radio';
+export const radioButtonProps = radioProps;
 export default defineComponent({
     name: 'RadioButton',
-    props: useRadio.props,
-    setup(props) {
-        return useRadio(props);
-    },
+    props: radioProps,
+    setup,
     render() {
         const { mergedClsPrefix } = this;
         return (h("label", { class: [
                 `${mergedClsPrefix}-radio-button`,
-                {
-                    [`${mergedClsPrefix}-radio-button--disabled`]: this.mergedDisabled,
-                    [`${mergedClsPrefix}-radio-button--checked`]: this.renderSafeChecked,
-                    [`${mergedClsPrefix}-radio-button--focus`]: this.focus
-                }
+                this.mergedDisabled && `${mergedClsPrefix}-radio-button--disabled`,
+                this.renderSafeChecked && `${mergedClsPrefix}-radio-button--checked`,
+                this.focus && [`${mergedClsPrefix}-radio-button--focus`]
             ] },
             h("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
             h("div", { class: `${mergedClsPrefix}-radio-button__state-border` }),

package/es/radio/src/RadioGroup.d.ts

@@ -3,9 +3,9 @@ import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import { OnUpdateValue } from './interface';
 export declare const radioGroupProps: {
     readonly name: StringConstructor;
-    readonly value: PropType<string | number | null>;
+    readonly value: PropType<string | number | boolean | null>;
     readonly defaultValue: {
-        readonly type: PropType<string | number | null>;
+        readonly type: PropType<string | number | boolean | null>;
         readonly default: null;
     };
     readonly size: PropType<"small" | "medium" | "large">;
@@ -30,6 +30,7 @@ export declare const radioGroupProps: {
         boxShadowDisabled: string;
         color: string;
         colorDisabled: string;
+        colorActive: string;
         textColor: string;
         textColorDisabled: string;
         dotColorActive: string;
@@ -67,6 +68,7 @@ export declare const radioGroupProps: {
         boxShadowDisabled: string;
         color: string;
         colorDisabled: string;
+        colorActive: string;
         textColor: string;
         textColorDisabled: string;
         dotColorActive: string;
@@ -104,6 +106,7 @@ export declare const radioGroupProps: {
         boxShadowDisabled: string;
         color: string;
         colorDisabled: string;
+        colorActive: string;
         textColor: string;
         textColorDisabled: string;
         dotColorActive: string;
@@ -130,9 +133,9 @@ export declare const radioGroupProps: {
 export declare type RadioGroupProps = ExtractPublicPropTypes<typeof radioGroupProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly name: StringConstructor;
-    readonly value: PropType<string | number | null>;
+    readonly value: PropType<string | number | boolean | null>;
     readonly defaultValue: {
-        readonly type: PropType<string | number | null>;
+        readonly type: PropType<string | number | boolean | null>;
         readonly default: null;
     };
     readonly size: PropType<"small" | "medium" | "large">;
@@ -157,6 +160,7 @@ declare const _default: import("vue").DefineComponent<{
         boxShadowDisabled: string;
         color: string;
         colorDisabled: string;
+        colorActive: string;
         textColor: string;
         textColorDisabled: string;
         dotColorActive: string;
@@ -194,6 +198,7 @@ declare const _default: import("vue").DefineComponent<{
         boxShadowDisabled: string;
         color: string;
         colorDisabled: string;
+        colorActive: string;
         textColor: string;
         textColorDisabled: string;
         dotColorActive: string;
@@ -231,6 +236,7 @@ declare const _default: import("vue").DefineComponent<{
         boxShadowDisabled: string;
         color: string;
         colorDisabled: string;
+        colorActive: string;
         textColor: string;
         textColorDisabled: string;
         dotColorActive: string;
@@ -257,7 +263,7 @@ declare const _default: import("vue").DefineComponent<{
     selfElRef: import("vue").Ref<HTMLDivElement | null>;
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedClsPrefix: import("vue").ComputedRef<string>;
-    mergedValue: import("vue").ComputedRef<string | number | null>;
+    mergedValue: import("vue").ComputedRef<string | number | boolean | null>;
     handleFocusout: (e: FocusEvent) => void;
     handleFocusin: (e: FocusEvent) => void;
     cssVars: import("vue").ComputedRef<{
@@ -280,9 +286,9 @@ declare const _default: import("vue").DefineComponent<{
     onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly name: StringConstructor;
-    readonly value: PropType<string | number | null>;
+    readonly value: PropType<string | number | boolean | null>;
     readonly defaultValue: {
-        readonly type: PropType<string | number | null>;
+        readonly type: PropType<string | number | boolean | null>;
         readonly default: null;
     };
     readonly size: PropType<"small" | "medium" | "large">;
@@ -307,6 +313,7 @@ declare const _default: import("vue").DefineComponent<{
         boxShadowDisabled: string;
         color: string;
         colorDisabled: string;
+        colorActive: string;
         textColor: string;
         textColorDisabled: string;
         dotColorActive: string;
@@ -344,6 +351,7 @@ declare const _default: import("vue").DefineComponent<{
         boxShadowDisabled: string;
         color: string;
         colorDisabled: string;
+        colorActive: string;
         textColor: string;
         textColorDisabled: string;
         dotColorActive: string;
@@ -381,6 +389,7 @@ declare const _default: import("vue").DefineComponent<{
         boxShadowDisabled: string;
         color: string;
         colorDisabled: string;
+        colorActive: string;
         textColor: string;
         textColorDisabled: string;
         dotColorActive: string;
@@ -405,6 +414,6 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }>>, {
     readonly disabled: boolean | undefined;
-    readonly defaultValue: string | number | null;
+    readonly defaultValue: string | number | boolean | null;
 }>;
 export default _default;

package/es/radio/src/RadioGroup.js

@@ -63,8 +63,8 @@ function mapSlot(defaultSlot, value, clsPrefix) {
         isButtonGroup
     };
 }
-export const radioGroupProps = Object.assign(Object.assign({}, useTheme.props), { name: String, value: [String, Number], defaultValue: {
-        type: [String, Number],
+export const radioGroupProps = Object.assign(Object.assign({}, useTheme.props), { name: String, value: [String, Number, Boolean], defaultValue: {
+        type: [String, Number, Boolean],
         default: null
     }, size: String, disabled: {
         type: Boolean,

package/es/radio/src/interface.d.ts

@@ -1,2 +1,2 @@
-export declare type OnUpdateValue = (value: string & number) => void;
-export declare type OnUpdateValueImpl = (value: string | number) => void;
+export declare type OnUpdateValue = (value: string & number & boolean) => void;
+export declare type OnUpdateValueImpl = (value: string | number | boolean) => void;

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

@@ -15,6 +15,7 @@ import { c, cE, cM, cNotM, cB } from '../../../_utils/cssr'; // vars:
 // --n-text-color-disabled
 // --n-label-padding
 // --n-label-line-height
+// --n-color-active
 
 export default cB('radio', `
  line-height: var(--n-label-line-height);
@@ -27,7 +28,9 @@ export default cB('radio', `
  flex-wrap: nowrap;
  font-size: var(--n-font-size);
  word-break: break-word;
-`, [cE('dot-wrapper', `
+`, [cM('checked', [cE('dot', `
+ background-color: var(--n-color-active);
+ `)]), cE('dot-wrapper', `
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;

package/es/radio/src/use-radio.d.ts

@@ -1,10 +1,10 @@
 import { ExtractPropTypes, PropType, Ref, ComputedRef } from 'vue';
 import type { MaybeArray } from '../../_utils';
 import { OnUpdateValue } from './interface';
-declare const radioProps: {
+export declare const radioProps: {
     readonly name: StringConstructor;
     readonly value: {
-        readonly type: PropType<string | number>;
+        readonly type: PropType<string | number | boolean>;
         readonly default: "on";
     };
     readonly checked: {
@@ -22,14 +22,13 @@ declare const radioProps: {
     readonly 'onUpdate:checked': PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly checkedValue: {
         readonly type: PropType<boolean | undefined>;
-        readonly validator: () => boolean;
         readonly default: undefined;
     };
 };
 export interface RadioGroupInjection {
     mergedClsPrefixRef: Ref<string>;
     nameRef: Ref<string | undefined>;
-    valueRef: Ref<string | number | null>;
+    valueRef: Ref<string | number | boolean | null>;
     mergedSizeRef: Ref<'small' | 'medium' | 'large'>;
     disabledRef: Ref<boolean>;
     doUpdateValue: OnUpdateValue;
@@ -50,32 +49,5 @@ export interface UseRadio {
     handleRadioInputFocus: () => void;
 }
 declare function setup(props: ExtractPropTypes<typeof radioProps>): UseRadio;
-declare namespace setup {
-    var props: {
-        readonly name: StringConstructor;
-        readonly value: {
-            readonly type: PropType<string | number>;
-            readonly default: "on";
-        };
-        readonly checked: {
-            readonly type: PropType<boolean | undefined>;
-            readonly default: undefined;
-        };
-        readonly defaultChecked: BooleanConstructor;
-        readonly disabled: {
-            readonly type: PropType<boolean | undefined>;
-            readonly default: undefined;
-        };
-        readonly label: StringConstructor;
-        readonly size: PropType<"small" | "medium" | "large">;
-        readonly onUpdateChecked: PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        readonly 'onUpdate:checked': PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        readonly checkedValue: {
-            readonly type: PropType<boolean | undefined>;
-            readonly validator: () => boolean;
-            readonly default: undefined;
-        };
-    };
-}
 export declare type RadioProps = ExtractPropTypes<typeof radioProps>;
-export default setup;
+export { setup };

package/es/radio/src/use-radio.js

@@ -1,11 +1,11 @@
-import { inject, ref, toRef } from 'vue';
+import { inject, ref, toRef, watchEffect } from 'vue';
 import { useMemo, useMergedState } from 'vooks';
 import { useConfig, useFormItem } from '../../_mixins';
-import { warn, call, createInjectionKey } from '../../_utils';
-const radioProps = {
+import { call, createInjectionKey, warnOnce } from '../../_utils';
+export const radioProps = {
     name: String,
     value: {
-        type: [String, Number],
+        type: [String, Number, Boolean],
         default: 'on'
     },
     checked: {
@@ -24,15 +24,18 @@ const radioProps = {
     // deprecated
     checkedValue: {
         type: Boolean,
-        validator: () => {
-            warn('radio', '`checked-value` is deprecated, please use `checked` instead.');
-            return true;
-        },
         default: undefined
     }
 };
 export const radioGroupInjectionKey = createInjectionKey('n-radio-group');
 function setup(props) {
+    if (process.env.NODE_ENV !== 'production') {
+        watchEffect(() => {
+            if (props.checkedValue !== undefined) {
+                warnOnce('radio', '`checked-value` is deprecated, please use `checked` instead.');
+            }
+        });
+    }
     const formItem = useFormItem(props, {
         mergedSize(NFormItem) {
             const { size } = props;
@@ -130,5 +133,4 @@ function setup(props) {
         handleRadioInputFocus
     };
 }
-setup.props = radioProps;
-export default setup;
+export { setup };

package/es/radio/styles/dark.js

@@ -8,7 +8,7 @@ const radioDark = {
         const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge, lineHeight } = vars;
         return Object.assign(Object.assign({}, commonVariables), { labelLineHeight: lineHeight, buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
             fontSizeMedium,
-            fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: '#0000', colorDisabled: inputColorDisabled, textColor: textColor2, textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: primaryColor, buttonColor: '#0000', buttonColorActive: primaryColor, buttonTextColor: textColor2, buttonTextColorActive: baseColor, buttonTextColorHover: primaryColor, opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: `inset 0 0 0 1px ${primaryColor}`, buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
+            fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: '#0000', colorDisabled: inputColorDisabled, colorActive: '#0000', textColor: textColor2, textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: primaryColor, buttonColor: '#0000', buttonColorActive: primaryColor, buttonTextColor: textColor2, buttonTextColorActive: baseColor, buttonTextColorHover: primaryColor, opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: `inset 0 0 0 1px ${primaryColor}`, buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
     }
 };
 export default radioDark;

package/es/radio/styles/light.d.ts

@@ -15,6 +15,7 @@ declare const self: (vars: ThemeCommonVars) => {
     boxShadowDisabled: string;
     color: string;
     colorDisabled: string;
+    colorActive: string;
     textColor: string;
     textColorDisabled: string;
     dotColorActive: string;

package/es/radio/styles/light.js

@@ -5,7 +5,7 @@ const self = (vars) => {
     const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge, lineHeight } = vars;
     return Object.assign(Object.assign({}, commonVariables), { labelLineHeight: lineHeight, buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
         fontSizeMedium,
-        fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.2 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: baseColor, colorDisabled: inputColorDisabled, textColor: textColor2, textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: borderColor, buttonColor: baseColor, buttonColorActive: baseColor, buttonTextColor: textColor2, buttonTextColorActive: primaryColor, buttonTextColorHover: primaryColor, opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: 'inset 0 0 0 1px #0000', buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
+        fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.2 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: baseColor, colorDisabled: inputColorDisabled, colorActive: '#0000', textColor: textColor2, textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: borderColor, buttonColor: baseColor, buttonColorActive: baseColor, buttonTextColor: textColor2, buttonTextColorActive: primaryColor, buttonTextColorHover: primaryColor, opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: 'inset 0 0 0 1px #0000', buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
 };
 const radioLight = {
     name: 'Radio',

package/es/rate/src/Rate.d.ts

@@ -1,5 +1,6 @@
 import { PropType } from 'vue';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
+import type { RateOnUpdateValue } from './interface';
 export declare const rateProps: {
     readonly allowHalf: BooleanConstructor;
     readonly count: {
@@ -8,17 +9,19 @@ export declare const rateProps: {
     };
     readonly value: NumberConstructor;
     readonly defaultValue: {
-        readonly type: NumberConstructor;
-        readonly default: 0;
+        readonly type: PropType<number | null>;
+        readonly default: null;
     };
     readonly readonly: BooleanConstructor;
     readonly size: {
         readonly type: PropType<number | "small" | "medium" | "large">;
         readonly default: "medium";
     };
+    readonly clearable: BooleanConstructor;
     readonly color: StringConstructor;
-    readonly 'onUpdate:value': PropType<MaybeArray<(value: number) => void>>;
-    readonly onUpdateValue: PropType<MaybeArray<(value: number) => void>>;
+    readonly onClear: PropType<() => void>;
+    readonly 'onUpdate:value': PropType<MaybeArray<RateOnUpdateValue>>;
+    readonly onUpdateValue: PropType<MaybeArray<RateOnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Rate", {
         itemColor: string;
         itemColorActive: string;
@@ -50,17 +53,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly value: NumberConstructor;
     readonly defaultValue: {
-        readonly type: NumberConstructor;
-        readonly default: 0;
+        readonly type: PropType<number | null>;
+        readonly default: null;
     };
     readonly readonly: BooleanConstructor;
     readonly size: {
         readonly type: PropType<number | "small" | "medium" | "large">;
         readonly default: "medium";
     };
+    readonly clearable: BooleanConstructor;
     readonly color: StringConstructor;
-    readonly 'onUpdate:value': PropType<MaybeArray<(value: number) => void>>;
-    readonly onUpdateValue: PropType<MaybeArray<(value: number) => void>>;
+    readonly onClear: PropType<() => void>;
+    readonly 'onUpdate:value': PropType<MaybeArray<RateOnUpdateValue>>;
+    readonly onUpdateValue: PropType<MaybeArray<RateOnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Rate", {
         itemColor: string;
         itemColorActive: string;
@@ -84,11 +89,12 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
-    mergedValue: import("vue").ComputedRef<number>;
+    mergedValue: import("vue").ComputedRef<number | null>;
     hoverIndex: import("vue").Ref<number | null>;
     handleMouseMove: (index: number, e: MouseEvent) => void;
     handleClick: (index: number, e: MouseEvent) => void;
     handleMouseLeave: () => void;
+    handleMouseEnterSomeStar: () => void;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-item-color': string;
@@ -105,17 +111,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly value: NumberConstructor;
     readonly defaultValue: {
-        readonly type: NumberConstructor;
-        readonly default: 0;
+        readonly type: PropType<number | null>;
+        readonly default: null;
     };
     readonly readonly: BooleanConstructor;
     readonly size: {
         readonly type: PropType<number | "small" | "medium" | "large">;
         readonly default: "medium";
     };
+    readonly clearable: BooleanConstructor;
     readonly color: StringConstructor;
-    readonly 'onUpdate:value': PropType<MaybeArray<(value: number) => void>>;
-    readonly onUpdateValue: PropType<MaybeArray<(value: number) => void>>;
+    readonly onClear: PropType<() => void>;
+    readonly 'onUpdate:value': PropType<MaybeArray<RateOnUpdateValue>>;
+    readonly onUpdateValue: PropType<MaybeArray<RateOnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Rate", {
         itemColor: string;
         itemColorActive: string;
@@ -140,7 +148,8 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     readonly readonly: boolean;
     readonly size: number | "small" | "medium" | "large";
-    readonly defaultValue: number;
+    readonly clearable: boolean;
+    readonly defaultValue: number | null;
     readonly count: number;
     readonly allowHalf: boolean;
 }>;

package/es/rate/src/Rate.js

@@ -4,18 +4,18 @@ import { NBaseIcon } from '../../_internal';
 import { useTheme, useFormItem, useConfig, useThemeClass } from '../../_mixins';
 import { call, color2Class, createKey } from '../../_utils';
 import { rateLight } from '../styles';
-import style from './styles/index.cssr';
 import StarIcon from './StarIcon';
+import style from './styles/index.cssr';
 export const rateProps = Object.assign(Object.assign({}, useTheme.props), { allowHalf: Boolean, count: {
         type: Number,
         default: 5
     }, value: Number, defaultValue: {
         type: Number,
-        default: 0
+        default: null
     }, readonly: Boolean, size: {
         type: [String, Number],
         default: 'medium'
-    }, color: String, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
+    }, clearable: Boolean, color: String, onClear: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
 export default defineComponent({
     name: 'Rate',
     props: rateProps,
@@ -26,6 +26,7 @@ export default defineComponent({
         const uncontrolledValueRef = ref(props.defaultValue);
         const hoverIndexRef = ref(null);
         const formItem = useFormItem(props);
+        const mergedValue = useMergedState(controlledValueRef, uncontrolledValueRef);
         function doUpdateValue(value) {
             const { 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;
             const { nTriggerFormChange, nTriggerFormInput } = formItem;
@@ -53,14 +54,31 @@ export default defineComponent({
                 return index + 1;
             }
         }
+        let cleared = false;
         function handleMouseMove(index, e) {
+            if (cleared)
+                return;
             hoverIndexRef.value = getDerivedValue(index, e);
         }
         function handleMouseLeave() {
             hoverIndexRef.value = null;
         }
         function handleClick(index, e) {
-            doUpdateValue(getDerivedValue(index, e));
+            var _a;
+            const { clearable } = props;
+            const derivedValue = getDerivedValue(index, e);
+            if (clearable && derivedValue === mergedValue.value) {
+                cleared = true;
+                (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props);
+                hoverIndexRef.value = null;
+                doUpdateValue(null);
+            }
+            else {
+                doUpdateValue(derivedValue);
+            }
+        }
+        function handleMouseEnterSomeStar() {
+            cleared = false;
         }
         const mergedSizeRef = computed(() => {
             const { size } = props;
@@ -75,10 +93,11 @@ export default defineComponent({
         const cssVarsRef = computed(() => {
             const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
             const { itemColor, itemColorActive } = self;
+            const { color } = props;
             return {
                 '--n-bezier': cubicBezierEaseInOut,
                 '--n-item-color': itemColor,
-                '--n-item-color-active': props.color || itemColorActive,
+                '--n-item-color-active': color || itemColorActive,
                 '--n-item-size': mergedSizeRef.value
             };
         });
@@ -98,11 +117,12 @@ export default defineComponent({
             : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            mergedValue: useMergedState(controlledValueRef, uncontrolledValueRef),
+            mergedValue,
             hoverIndex: hoverIndexRef,
             handleMouseMove,
             handleClick,
             handleMouseLeave,
+            handleMouseEnterSomeStar,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
@@ -119,17 +139,17 @@ export default defineComponent({
                 this.themeClass
             ], style: this.cssVars, onMouseleave: this.handleMouseLeave }, renderList(this.count, (_, index) => {
             const icon = defaultSlot ? (defaultSlot()) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => StarIcon }));
-            const fullStarActive = hoverIndex !== null
+            const entireStarActive = hoverIndex !== null
                 ? index + 1 <= hoverIndex
-                : index + 1 <= mergedValue;
+                : index + 1 <= (mergedValue || 0);
             return (h("div", { key: index, class: [
                     `${mergedClsPrefix}-rate__item`,
-                    fullStarActive && `${mergedClsPrefix}-rate__item--active`
+                    entireStarActive && `${mergedClsPrefix}-rate__item--active`
                 ], onClick: readonly
                     ? undefined
                     : (e) => {
                         this.handleClick(index, e);
-                    }, onMousemove: readonly
+                    }, onMouseenter: this.handleMouseEnterSomeStar, onMousemove: readonly
                     ? undefined
                     : (e) => {
                         this.handleMouseMove(index, e);
@@ -138,9 +158,9 @@ export default defineComponent({
                 this.allowHalf ? (h("div", { class: [
                         `${mergedClsPrefix}-rate__half`,
                         {
-                            [`${mergedClsPrefix}-rate__half--active`]: !fullStarActive && hoverIndex !== null
+                            [`${mergedClsPrefix}-rate__half--active`]: !entireStarActive && hoverIndex !== null
                                 ? index + 0.5 <= hoverIndex
-                                : index + 0.5 <= mergedValue
+                                : index + 0.5 <= (mergedValue || 0)
                         }
                     ] }, icon)) : null));
         })));

package/es/rate/src/interface.d.ts

@@ -0,0 +1,2 @@
+export declare type RateOnUpdateValue = (value: number & null) => void;
+export declare type RateOnUpdateValueImpl = (value: number | null) => void;

package/es/rate/src/interface.js

@@ -0,0 +1 @@
+export {};