naive-ui 2.34.3 → 2.35.0

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

@@ -1,6 +1,6 @@
-import { PropType } from 'vue';
+import { type PropType } from 'vue';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-import { OnUpdateValue } from './interface';
+import { type OnUpdateValue } from './interface';
 export declare const radioGroupProps: {
     readonly name: StringConstructor;
     readonly value: PropType<string | number | boolean | null>;
@@ -268,7 +268,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>;
+    mergedClsPrefix: import("vue").Ref<string>;
     mergedValue: import("vue").ComputedRef<string | number | boolean | null>;
     handleFocusout: (e: FocusEvent) => void;
     handleFocusin: (e: FocusEvent) => void;
@@ -424,5 +424,5 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     readonly disabled: boolean | undefined;
     readonly defaultValue: string | number | boolean | null;
-}>;
+}, {}>;
 export default _default;

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

@@ -1,7 +1,7 @@
-import { ExtractPropTypes, PropType, Ref, ComputedRef } from 'vue';
+import { type ExtractPropTypes, type PropType, type Ref, type ComputedRef } from 'vue';
 import type { MaybeArray } from '../../_utils';
-import { OnUpdateValue } from './interface';
-export declare const radioProps: {
+import { type OnUpdateValue } from './interface';
+export declare const radioBaseProps: {
     readonly name: StringConstructor;
     readonly value: {
         readonly type: PropType<string | number | boolean>;
@@ -48,6 +48,6 @@ export interface UseRadio {
     handleRadioInputBlur: () => void;
     handleRadioInputFocus: () => void;
 }
-declare function setup(props: ExtractPropTypes<typeof radioProps>): UseRadio;
-export type RadioProps = ExtractPropTypes<typeof radioProps>;
+declare function setup(props: ExtractPropTypes<typeof radioBaseProps>): UseRadio;
+export type RadioBaseProps = ExtractPropTypes<typeof radioBaseProps>;
 export { setup };

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

@@ -2,7 +2,7 @@ import { inject, ref, toRef, watchEffect } from 'vue';
 import { useMemo, useMergedState } from 'vooks';
 import { useConfig, useFormItem } from '../../_mixins';
 import { call, createInjectionKey, warnOnce } from '../../_utils';
-export const radioProps = {
+export const radioBaseProps = {
     name: String,
     value: {
         type: [String, Number, Boolean],

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

@@ -1,5 +1,5 @@
 import type { ThemeCommonVars } from '../../_styles/common';
-import { Theme } from '../../_mixins/use-theme';
+import { type Theme } from '../../_mixins/use-theme';
 declare const self: (vars: ThemeCommonVars) => {
     labelLineHeight: string;
     buttonHeightSmall: string;

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

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { type PropType } from 'vue';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { RateOnUpdateValue } from './interface';
 export declare const rateProps: {
@@ -88,7 +88,7 @@ declare const _default: import("vue").DefineComponent<{
         sizeLarge: string;
     }, any>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     mergedValue: import("vue").ComputedRef<number | null>;
     hoverIndex: import("vue").Ref<number | null>;
     handleMouseMove: (index: number, e: MouseEvent) => void;
@@ -152,5 +152,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly defaultValue: number | null;
     readonly count: number;
     readonly allowHalf: boolean;
-}>;
+}, {}>;
 export default _default;

package/es/rate/src/Rate.js

@@ -138,7 +138,7 @@ 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 icon = defaultSlot ? (defaultSlot({ index })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => StarIcon }));
             const entireStarActive = hoverIndex !== null
                 ? index + 1 <= hoverIndex
                 : index + 1 <= (mergedValue || 0);

package/es/rate/styles/dark.d.ts

@@ -1,3 +1,3 @@
-import { RateTheme } from './light';
+import { type RateTheme } from './light';
 declare const rateDark: RateTheme;
 export default rateDark;

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

@@ -1,5 +1,5 @@
 import type { ThemeCommonVars } from '../../_styles/common';
-import { Theme } from '../../_mixins';
+import { type Theme } from '../../_mixins';
 declare const self: (vars: ThemeCommonVars) => {
     itemColor: string;
     itemColorActive: string;

package/es/result/src/Result.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { type PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 export declare const resultProps: {
     size: {
@@ -181,7 +181,7 @@ declare const _default: import("vue").DefineComponent<{
         iconColor500: undefined;
     }, any>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-font-size': string;
@@ -287,5 +287,5 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     size: "small" | "medium" | "large" | "huge";
     status: "500" | "error" | "info" | "success" | "warning" | "404" | "403" | "418";
-}>;
+}, {}>;
 export default _default;

package/es/scrollbar/src/Scrollbar.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { type PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 export interface ScrollTo {
     (x: number, y: number): void;
@@ -17,6 +17,7 @@ export declare const scrollbarProps: {
     readonly trigger: PropType<"none" | "hover">;
     readonly xScrollable: BooleanConstructor;
     readonly onScroll: PropType<(e: Event) => void>;
+    readonly size: NumberConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Scrollbar", {
         color: string;
         colorHover: string;
@@ -35,6 +36,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly trigger: PropType<"none" | "hover">;
     readonly xScrollable: BooleanConstructor;
     readonly onScroll: PropType<(e: Event) => void>;
+    readonly size: NumberConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Scrollbar", {
         color: string;
         colorHover: string;
@@ -66,6 +68,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly trigger: PropType<"none" | "hover">;
     readonly xScrollable: BooleanConstructor;
     readonly onScroll: PropType<(e: Event) => void>;
+    readonly size: NumberConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Scrollbar", {
         color: string;
         colorHover: string;
@@ -80,5 +83,5 @@ declare const Scrollbar: import("vue").DefineComponent<{
     }, any>>>;
 }>>, {
     readonly xScrollable: boolean;
-}>;
+}, {}>;
 export default Scrollbar;

package/es/scrollbar/src/Scrollbar.js

@@ -1,7 +1,7 @@
 import { h, defineComponent, ref } from 'vue';
 import { NScrollbar } from '../../_internal';
 import { useTheme } from '../../_mixins';
-export const scrollbarProps = Object.assign(Object.assign({}, useTheme.props), { trigger: String, xScrollable: Boolean, onScroll: Function });
+export const scrollbarProps = Object.assign(Object.assign({}, useTheme.props), { trigger: String, xScrollable: Boolean, onScroll: Function, size: Number });
 const Scrollbar = defineComponent({
     name: 'Scrollbar',
     props: scrollbarProps,

package/es/select/src/Select.d.ts

@@ -1,8 +1,8 @@
-import { PropType, InputHTMLAttributes, HTMLAttributes } from 'vue';
-import { TreeNode } from 'treemate';
-import { FollowerPlacement } from 'vueuc';
-import { RenderLabel, RenderOption, NodeProps } from '../../_internal/select-menu/src/interface';
-import { RenderTag } from '../../_internal/selection/src/interface';
+import { type PropType, type InputHTMLAttributes, type HTMLAttributes } from 'vue';
+import { type TreeNode } from 'treemate';
+import { type FollowerPlacement } from 'vueuc';
+import { type RenderLabel, type RenderOption, type NodeProps } from '../../_internal/select-menu/src/interface';
+import { type RenderTag } from '../../_internal/selection/src/interface';
 import type { FormValidationStatus } from '../../form/src/interface';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import type { SelectMixedOption, SelectOption, SelectGroupOption, SelectIgnoredOption, SelectFallbackOption, OnUpdateValue, Value, Size, ValueAtom, SelectBaseOption, SelectFilter } from './interface';
@@ -28,6 +28,10 @@ export declare const selectProps: {
         readonly type: PropType<Value | null>;
         readonly default: null;
     };
+    readonly keyboard: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly value: PropType<Value | null>;
     readonly placeholder: StringConstructor;
     readonly menuProps: PropType<HTMLAttributes>;
@@ -521,6 +525,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<Value | null>;
         readonly default: null;
     };
+    readonly keyboard: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly value: PropType<Value | null>;
     readonly placeholder: StringConstructor;
     readonly menuProps: PropType<HTMLAttributes>;
@@ -992,7 +1000,7 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }, {
     mergedStatus: import("vue").ComputedRef<FormValidationStatus | undefined>;
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     mergedBordered: import("vue").ComputedRef<boolean>;
     namespace: import("vue").ComputedRef<string | undefined>;
     treeMate: import("vue").ComputedRef<import("treemate").TreeMate<SelectOption, SelectGroupOption, SelectIgnoredOption>>;
@@ -1002,6 +1010,7 @@ declare const _default: import("vue").DefineComponent<{
         focus: () => void;
         focusInput: () => void;
         blur: () => void;
+        blurInput: () => void;
         $el: HTMLElement;
     } | null>;
     menuRef: import("vue").Ref<{
@@ -1328,6 +1337,8 @@ declare const _default: import("vue").DefineComponent<{
     onRender: (() => void) | undefined;
     focus: () => void;
     blur: () => void;
+    focusInput: () => void;
+    blurInput: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
@@ -1350,6 +1361,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<Value | null>;
         readonly default: null;
     };
+    readonly keyboard: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly value: PropType<Value | null>;
     readonly placeholder: StringConstructor;
     readonly menuProps: PropType<HTMLAttributes>;
@@ -1820,12 +1835,12 @@ declare const _default: import("vue").DefineComponent<{
         }>;
     }>>>;
 }>>, {
+    readonly options: SelectMixedOption[];
     readonly tag: boolean;
     readonly show: boolean | undefined;
     readonly multiple: boolean;
     readonly disabled: boolean | undefined;
     readonly to: string | boolean | HTMLElement;
-    readonly options: SelectMixedOption[];
     readonly loading: boolean;
     readonly bordered: boolean | undefined;
     readonly placement: FollowerPlacement;
@@ -1841,11 +1856,12 @@ declare const _default: import("vue").DefineComponent<{
     readonly ignoreComposition: boolean;
     readonly clearFilterAfterSelect: boolean;
     readonly defaultValue: Value | null;
+    readonly keyboard: boolean;
     readonly remote: boolean;
     readonly widthMode: string;
     readonly fallbackOption: false | SelectFallbackOption | undefined;
     readonly consistentMenuWidth: boolean;
     readonly childrenField: string;
     readonly showOnFocus: boolean;
-}>;
+}, {}>;
 export default _default;

package/es/select/src/Select.js

@@ -22,6 +22,9 @@ export const selectProps = Object.assign(Object.assign({}, useTheme.props), { to
     }, defaultValue: {
         type: [String, Number, Array],
         default: null
+    }, keyboard: {
+        type: Boolean,
+        default: true
     }, value: [String, Number, Array], placeholder: String, menuProps: Object, multiple: Boolean, size: String, filterable: Boolean, disabled: {
         type: Boolean,
         default: undefined
@@ -476,9 +479,15 @@ export default defineComponent({
                 const optionBeingCreated = onCreate
                     ? onCreate(value)
                     : { [props.labelField]: value, [props.valueField]: value };
-                const { valueField } = props;
-                if (compitableOptionsRef.value.some((option) => option[valueField] === optionBeingCreated[valueField]) ||
-                    createdOptionsRef.value.some((option) => option[valueField] === optionBeingCreated[valueField])) {
+                const { valueField, labelField } = props;
+                if (compitableOptionsRef.value.some((option) => {
+                    return (option[valueField] === optionBeingCreated[valueField] ||
+                        option[labelField] === optionBeingCreated[labelField]);
+                }) ||
+                    createdOptionsRef.value.some((option) => {
+                        return (option[valueField] === optionBeingCreated[valueField] ||
+                            option[labelField] === optionBeingCreated[labelField]);
+                    })) {
                     beingCreatedOptionsRef.value = emptyArray;
                 }
                 else {
@@ -512,6 +521,10 @@ export default defineComponent({
         // also for menu keydown
         function handleKeydown(e) {
             var _a, _b, _c, _d, _e;
+            if (!props.keyboard) {
+                e.preventDefault();
+                return;
+            }
             switch (e.key) {
                 case ' ':
                     if (props.filterable)
@@ -606,9 +619,17 @@ export default defineComponent({
                 var _a;
                 (_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.focus();
             },
+            focusInput: () => {
+                var _a;
+                (_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.focusInput();
+            },
             blur: () => {
                 var _a;
                 (_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.blur();
+            },
+            blurInput: () => {
+                var _a;
+                (_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.blurInput();
             }
         };
         const cssVarsRef = computed(() => {

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

@@ -1,5 +1,5 @@
-import { TreeMate } from 'treemate';
-import { CSSProperties, VNodeChild, VNode } from 'vue';
+import { type TreeMate } from 'treemate';
+import { type CSSProperties, type VNodeChild, type VNode } from 'vue';
 export type SelectMixedOption = SelectBaseOption | SelectGroupOption | SelectIgnoredOption;
 export interface SelectBaseOption<V = string | number, L = string | ((option: SelectBaseOption<V>, selected: boolean) => VNodeChild)> {
     value?: V;
@@ -45,6 +45,8 @@ export type SelectGroupOption = (SelectGroupOptionBase & {
 export interface SelectInst {
     focus: () => void;
     blur: () => void;
+    focusInput: () => void;
+    blurInput: () => void;
 }
 export type SelectFallbackOption = (value: string & number) => SelectOption;
 export type SelectFallbackOptionImpl = (value: string | number) => SelectOption;

package/es/select/src/utils.d.ts

@@ -1,4 +1,4 @@
-import { TreeMateOptions } from 'treemate';
+import { type TreeMateOptions } from 'treemate';
 import type { SelectBaseOption, SelectGroupOption, SelectIgnoredOption, SelectMixedOption } from './interface';
 export declare function getIsGroup(option: SelectMixedOption): boolean;
 export declare function getIgnored(option: SelectMixedOption): boolean;

package/es/skeleton/src/Skeleton.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { type PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 export declare const skeletonProps: {
     readonly text: BooleanConstructor;
@@ -89,7 +89,7 @@ declare const _default: import("vue").DefineComponent<{
         heightLarge: string;
     }, any>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     style: import("vue").ComputedRef<{
         display: string;
         verticalAlign: string;
@@ -151,5 +151,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly circle: boolean;
     readonly animated: boolean;
     readonly sharp: boolean;
-}>;
+}, {}>;
 export default _default;

package/es/skeleton/styles/dark.d.ts

@@ -1,2 +1,2 @@
-import { SkeletonTheme } from './light';
+import { type SkeletonTheme } from './light';
 export declare const skeletonDark: SkeletonTheme;

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

@@ -1,5 +1,5 @@
 import type { ThemeCommonVars } from '../../_styles/common';
-import { Theme } from '../../_mixins';
+import { type Theme } from '../../_mixins';
 declare const self: (vars: ThemeCommonVars) => {
     color: string;
     colorEnd: string;

package/es/slider/src/Slider.d.ts

@@ -1,6 +1,6 @@
-import { PropType, CSSProperties } from 'vue';
-import { FollowerPlacement } from 'vueuc';
-import { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
+import { type PropType, type CSSProperties } from 'vue';
+import { type FollowerPlacement } from 'vueuc';
+import { type MaybeArray, type ExtractPublicPropTypes } from '../../_utils';
 export interface ClosestMark {
     value: number;
     distance: number;
@@ -281,7 +281,7 @@ declare const _default: import("vue").DefineComponent<{
         dotBorderRadius: string;
     }, any>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     namespace: import("vue").ComputedRef<string | undefined>;
     uncontrolledValue: import("vue").Ref<number | number[]>;
     mergedValue: import("vue").ComputedRef<number | number[]>;
@@ -506,5 +506,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly defaultValue: number | number[];
     readonly keyboard: boolean;
     readonly showTooltip: boolean | undefined;
-}>;
+}, {}>;
 export default _default;

package/es/slider/src/Slider.js

@@ -50,7 +50,7 @@ export default defineComponent({
         const { mergedDisabledRef } = formItem;
         const precisionRef = computed(() => {
             const { step } = props;
-            if (step <= 0 || step === 'mark')
+            if (Number(step) <= 0 || step === 'mark')
                 return 0;
             const stepString = step.toString();
             let precision = 0;
@@ -253,7 +253,7 @@ export default defineComponent({
         }
         function getRoundValue(value) {
             const { step, min } = props;
-            if (step <= 0 || step === 'mark')
+            if (Number(step) <= 0 || step === 'mark')
                 return value;
             const newValue = Math.round((value - min) / step) * step + min;
             return Number(newValue.toFixed(precisionRef.value));
@@ -327,7 +327,7 @@ export default defineComponent({
                 return;
             const { step } = props;
             const currentValue = arrifiedValueRef.value[activeIndex];
-            const nextValue = step <= 0 || step === 'mark'
+            const nextValue = Number(step) <= 0 || step === 'mark'
                 ? currentValue
                 : currentValue + step * ratio;
             doDispatchValue(
@@ -538,7 +538,15 @@ export default defineComponent({
                     return (h(VBinder, null, {
                         default: () => [
                             h(VTarget, null, {
-                                default: () => (h("div", { ref: this.setHandleRefs(index), class: `${mergedClsPrefix}-slider-handle-wrapper`, tabindex: this.mergedDisabled ? -1 : 0, style: this.getHandleStyle(value, index), onFocus: () => this.handleHandleFocus(index), onBlur: () => this.handleHandleBlur(index), onMouseenter: () => this.handleHandleMouseEnter(index), onMouseleave: () => this.handleHandleMouseLeave(index) }, resolveSlot(this.$slots.thumb, () => [
+                                default: () => (h("div", { ref: this.setHandleRefs(index), class: `${mergedClsPrefix}-slider-handle-wrapper`, tabindex: this.mergedDisabled ? -1 : 0, style: this.getHandleStyle(value, index), onFocus: () => {
+                                        this.handleHandleFocus(index);
+                                    }, onBlur: () => {
+                                        this.handleHandleBlur(index);
+                                    }, onMouseenter: () => {
+                                        this.handleHandleMouseEnter(index);
+                                    }, onMouseleave: () => {
+                                        this.handleHandleMouseLeave(index);
+                                    } }, resolveSlot(this.$slots.thumb, () => [
                                     h("div", { class: `${mergedClsPrefix}-slider-handle` })
                                 ])))
                             }),

package/es/slider/src/utils.d.ts

@@ -1,4 +1,4 @@
-import { Ref, ComponentPublicInstance } from 'vue';
+import { type Ref, type ComponentPublicInstance } from 'vue';
 export declare function isTouchEvent(e: MouseEvent | TouchEvent): e is TouchEvent;
 type RefType = HTMLElement | ComponentPublicInstance;
 type RefKey = number;

package/es/slider/src/utils.js

@@ -7,6 +7,8 @@ export function useRefs() {
     const setRefs = (index) => (el) => {
         refs.value.set(index, el);
     };
-    onBeforeUpdate(() => refs.value.clear());
+    onBeforeUpdate(() => {
+        refs.value.clear();
+    });
     return [refs, setRefs];
 }

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

@@ -1,5 +1,5 @@
 import type { ThemeCommonVars } from '../../_styles/common';
-import { Theme } from '../../_mixins';
+import { type Theme } from '../../_mixins';
 declare const self: (vars: ThemeCommonVars) => {
     fontSize: string;
     markFontSize: string;

package/es/space/src/Space.d.ts

@@ -1,4 +1,4 @@
-import { PropType, CSSProperties } from 'vue';
+import { type PropType, type CSSProperties } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 type Align = 'stretch' | 'baseline' | 'start' | 'end' | 'center' | 'flex-end' | 'flex-start';
 export type Justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
@@ -87,7 +87,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     useGap: boolean;
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     margin: import("vue").ComputedRef<{
         horizontal: number;
         vertical: number;
@@ -140,5 +140,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly justify: Justify;
     readonly wrapItem: boolean;
     readonly internalUseGap: boolean;
-}>;
+}, {}>;
 export default _default;

package/es/space/styles/rtl.d.ts

@@ -1,2 +1,2 @@
-import { RtlItem } from '../../config-provider/src/internal-interface';
+import { type RtlItem } from '../../config-provider/src/internal-interface';
 export declare const spaceRtl: RtlItem;

package/es/spin/src/Spin.d.ts

@@ -1,5 +1,5 @@
-import { PropType } from 'vue';
-import { ExtractPublicPropTypes } from '../../_utils';
+import { type PropType } from 'vue';
+import { type ExtractPublicPropTypes } from '../../_utils';
 export declare const spinProps: {
     description: StringConstructor;
     stroke: StringConstructor;
@@ -21,6 +21,7 @@ export declare const spinProps: {
         validator: () => boolean;
         default: undefined;
     };
+    delay: NumberConstructor;
     theme: PropType<import("../../_mixins").Theme<"Spin", {
         fontSize: string;
         textColor: string;
@@ -77,6 +78,7 @@ declare const _default: import("vue").DefineComponent<{
         validator: () => boolean;
         default: undefined;
     };
+    delay: NumberConstructor;
     theme: PropType<import("../../_mixins").Theme<"Spin", {
         fontSize: string;
         textColor: string;
@@ -111,8 +113,8 @@ declare const _default: import("vue").DefineComponent<{
         opacitySpinning: string;
     }, any>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
-    compitableShow: import("vue").ComputedRef<boolean>;
+    mergedClsPrefix: import("vue").Ref<string>;
+    active: import("vue").Ref<boolean>;
     mergedStrokeWidth: import("vue").ComputedRef<number>;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
@@ -144,6 +146,7 @@ declare const _default: import("vue").DefineComponent<{
         validator: () => boolean;
         default: undefined;
     };
+    delay: NumberConstructor;
     theme: PropType<import("../../_mixins").Theme<"Spin", {
         fontSize: string;
         textColor: string;
@@ -182,5 +185,5 @@ declare const _default: import("vue").DefineComponent<{
     show: boolean;
     rotate: boolean;
     spinning: boolean;
-}>;
+}, {}>;
 export default _default;

package/es/spin/src/Spin.js

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, Transition, watchEffect } from 'vue';
+import { computed, defineComponent, h, Transition, ref, watchEffect } from 'vue';
 import { useCompitable } from 'vooks';
 import { pxfy } from 'seemly';
 import { NBaseLoading } from '../../_internal';
@@ -26,7 +26,7 @@ export const spinProps = Object.assign(Object.assign({}, useTheme.props), { desc
             return true;
         },
         default: undefined
-    } });
+    }, delay: Number });
 export default defineComponent({
     name: 'Spin',
     props: spinProps,
@@ -61,9 +61,27 @@ export default defineComponent({
                 return typeof size === 'number' ? String(size) : size[0];
             }), cssVarsRef, props)
             : undefined;
+        const compitableShow = useCompitable(props, ['spinning', 'show']);
+        const activeRef = ref(false);
+        watchEffect((onCleanup) => {
+            let timerId;
+            if (compitableShow.value) {
+                const { delay } = props;
+                if (delay) {
+                    timerId = window.setTimeout(() => {
+                        activeRef.value = true;
+                    }, delay);
+                    onCleanup(() => {
+                        clearTimeout(timerId);
+                    });
+                    return;
+                }
+            }
+            activeRef.value = compitableShow.value;
+        });
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            compitableShow: useCompitable(props, ['spinning', 'show']),
+            active: activeRef,
             mergedStrokeWidth: computed(() => {
                 const { strokeWidth } = props;
                 if (strokeWidth !== undefined)
@@ -93,10 +111,10 @@ export default defineComponent({
         return $slots.default ? (h("div", { class: [`${mergedClsPrefix}-spin-container`, this.themeClass], style: this.cssVars },
             h("div", { class: [
                     `${mergedClsPrefix}-spin-content`,
-                    this.compitableShow && `${mergedClsPrefix}-spin-content--spinning`
+                    this.active && `${mergedClsPrefix}-spin-content--spinning`
                 ] }, $slots),
             h(Transition, { name: "fade-in-transition" }, {
-                default: () => (this.compitableShow ? icon : null)
+                default: () => (this.active ? icon : null)
             }))) : (icon);
     }
 });

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

@@ -1,4 +1,4 @@
-import { Theme } from '../../_mixins';
+import { type Theme } from '../../_mixins';
 import type { ThemeCommonVars } from '../../_styles/common';
 export declare const self: (vars: ThemeCommonVars) => {
     fontSize: string;