naive-ui 2.25.0 → 2.25.3

package/lib/alert/src/Alert.js

@@ -41,9 +41,9 @@ exports.default = (0, vue_1.defineComponent)({
     inheritAttrs: false,
     props: alertProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Alert', '-alert', index_cssr_1.default, styles_1.alertLight, props, mergedClsPrefixRef);
-        const cssVars = (0, vue_1.computed)(() => {
+        const cssVarsRef = (0, vue_1.computed)(() => {
             const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
             const { fontSize, borderRadius, titleFontWeight, lineHeight, iconSize, iconMargin, closeSize, closeMargin, padding } = self;
             const { type } = props;
@@ -71,6 +71,11 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-icon-margin-right': right
             };
         });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('alert', (0, vue_1.computed)(() => {
+                return props.type[0];
+            }), cssVarsRef, props)
+            : undefined;
         const visibleRef = (0, vue_1.ref)(true);
         const doAfterLeave = () => {
             const { onAfterLeave, onAfterHide // deprecated
@@ -97,16 +102,21 @@ exports.default = (0, vue_1.defineComponent)({
             handleCloseClick,
             handleAfterLeave,
             mergedTheme: themeRef,
-            cssVars
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
+        var _a;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return ((0, vue_1.h)(_internal_1.NFadeInExpandTransition, { onAfterLeave: this.handleAfterLeave }, {
             default: () => {
                 const { mergedClsPrefix, $slots } = this;
                 const attrs = {
                     class: [
                         `${mergedClsPrefix}-alert`,
+                        this.themeClass,
                         this.showIcon && `${mergedClsPrefix}-alert--show-icon`
                     ],
                     style: this.cssVars,
@@ -114,24 +124,29 @@ exports.default = (0, vue_1.defineComponent)({
                 };
                 return this.visible ? ((0, vue_1.h)("div", Object.assign({}, (0, vue_1.mergeProps)(this.$attrs, attrs)),
                     this.closable && ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-alert__close`, onClick: this.handleCloseClick })),
-                    this.showIcon && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert__icon`, "aria-hidden": "true" }, $slots.icon ? ($slots.icon()) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                        default: () => {
-                            switch (this.type) {
-                                case 'success':
-                                    return (0, vue_1.h)(icons_1.SuccessIcon, null);
-                                case 'info':
-                                    return (0, vue_1.h)(icons_1.InfoIcon, null);
-                                case 'warning':
-                                    return (0, vue_1.h)(icons_1.WarningIcon, null);
-                                case 'error':
-                                    return (0, vue_1.h)(icons_1.ErrorIcon, null);
-                                default:
-                                    return null;
+                    this.showIcon && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert__icon`, "aria-hidden": "true" }, (0, _utils_1.resolveSlot)($slots.icon, () => [
+                        (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                            default: () => {
+                                switch (this.type) {
+                                    case 'success':
+                                        return (0, vue_1.h)(icons_1.SuccessIcon, null);
+                                    case 'info':
+                                        return (0, vue_1.h)(icons_1.InfoIcon, null);
+                                    case 'warning':
+                                        return (0, vue_1.h)(icons_1.WarningIcon, null);
+                                    case 'error':
+                                        return (0, vue_1.h)(icons_1.ErrorIcon, null);
+                                    default:
+                                        return null;
+                                }
                             }
-                        }
-                    })))),
+                        })
+                    ]))),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body` },
-                        this.title || $slots.header ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__title` }, $slots.header ? $slots.header() : this.title)) : null,
+                        (0, _utils_1.resolveWrappedSlot)($slots.header, (children) => {
+                            const mergedChildren = children || this.title;
+                            return mergedChildren ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__title` }, mergedChildren)) : null;
+                        }),
                         $slots.default && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__content` }, $slots))))) : null;
             }
         }));

package/lib/anchor/src/AnchorAdapter.js

@@ -35,7 +35,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Anchor',
     props: anchorProps,
     setup(props, { slots }) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Anchor', '-anchor', index_cssr_1.default, styles_1.anchorLight, props, mergedClsPrefixRef);
         const anchorRef = (0, vue_1.ref)(null);
         const cssVarsRef = (0, vue_1.computed)(() => {
@@ -55,13 +55,19 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-rail-width': railWidth
             };
         });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('anchor', undefined, cssVarsRef, props)
+            : undefined;
         return {
             scrollTo(href) {
                 var _a;
                 (_a = anchorRef.value) === null || _a === void 0 ? void 0 : _a.setActiveHref(href);
             },
             renderAnchor: () => {
-                return ((0, vue_1.h)(BaseAnchor_1.default, Object.assign({ ref: anchorRef, style: cssVarsRef.value }, (0, _utils_1.keep)(props, BaseAnchor_1.baseAnchorPropKeys), { mergedClsPrefix: mergedClsPrefixRef.value }), slots));
+                themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender();
+                return ((0, vue_1.h)(BaseAnchor_1.default, Object.assign({ ref: anchorRef, style: inlineThemeDisabled
+                        ? undefined
+                        : cssVarsRef.value, class: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass.value }, (0, _utils_1.keep)(props, BaseAnchor_1.baseAnchorPropKeys), { mergedClsPrefix: mergedClsPrefixRef.value }), slots));
             }
         };
     },

package/lib/auto-complete/src/AutoComplete.d.ts

@@ -1081,7 +1081,9 @@ declare const _default: import("vue").DefineComponent<{
     cssVars: import("vue").ComputedRef<{
         '--n-menu-box-shadow': string;
         '--n-bezier': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     mergedBordered: import("vue").ComputedRef<boolean>;
     namespace: import("vue").ComputedRef<string | undefined>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
@@ -1486,8 +1488,8 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean | undefined;
     to: string | boolean | HTMLElement;
     options: AutoCompleteOptions;
-    bordered: boolean | undefined;
     loading: boolean;
+    bordered: boolean | undefined;
     placement: FollowerPlacement;
     clearable: boolean;
     defaultValue: string | null;

package/lib/auto-complete/src/AutoComplete.js

@@ -51,7 +51,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedBorderedRef, namespaceRef, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedBorderedRef, namespaceRef, mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const formItem = (0, _mixins_1.useFormItem)(props);
         const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
         const triggerElRef = (0, vue_1.ref)(null);
@@ -188,6 +188,16 @@ exports.default = (0, vue_1.defineComponent)({
                 (_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.blur();
             }
         }
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { menuBoxShadow } } = themeRef.value;
+            return {
+                '--n-menu-box-shadow': menuBoxShadow,
+                '--n-bezier': cubicBezierEaseInOut
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('auto-complete', undefined, cssVarsRef, props)
+            : undefined;
         return {
             uncontrolledValue: uncontrolledValueRef,
             mergedValue: mergedValueRef,
@@ -210,13 +220,9 @@ exports.default = (0, vue_1.defineComponent)({
             handleCompositionEnd,
             handleKeyDown,
             mergedTheme: themeRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut }, self: { menuBoxShadow } } = themeRef.value;
-                return {
-                    '--n-menu-box-shadow': menuBoxShadow,
-                    '--n-bezier': cubicBezierEaseInOut
-                };
-            }),
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
             mergedBordered: mergedBorderedRef,
             namespace: namespaceRef,
             mergedClsPrefix: mergedClsPrefixRef
@@ -240,17 +246,24 @@ exports.default = (0, vue_1.defineComponent)({
                             }
                             const { mergedTheme } = this;
                             return ((0, vue_1.h)(input_1.NInput, { status: this.mergedStatus, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, bordered: this.mergedBordered, value: this.mergedValue, placeholder: this.placeholder, size: this.mergedSize, disabled: this.mergedDisabled, clearable: this.clearable, loading: this.loading, inputProps: this.inputProps, onClear: this.handleClear, onFocus: this.handleFocus, onUpdateValue: this.handleInput, onBlur: this.handleBlur }, {
-                                suffix: this.$slots.suffix,
-                                prefix: this.$slots.prefix
+                                suffix: () => { var _a, _b; return (_b = (_a = this.$slots).suffix) === null || _b === void 0 ? void 0 : _b.call(_a); },
+                                prefix: () => { var _a, _b; return (_b = (_a = this.$slots).prefix) === null || _b === void 0 ? void 0 : _b.call(_a); }
                             }));
                         }
                     }),
                     (0, vue_1.h)(vueuc_1.VFollower, { show: this.active, to: this.adjustedTo, containerClass: this.namespace, zIndex: this.zIndex, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, placement: this.placement, width: "target" }, {
                         default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
-                            default: () => this.active
-                                ? (0, vue_1.withDirectives)((0, vue_1.h)(_internal_1.NInternalSelectMenu, { clsPrefix: mergedClsPrefix, ref: "menuInstRef", theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
-                                        .InternalSelectMenu, "auto-pending": true, class: `${mergedClsPrefix}-auto-complete-menu`, style: this.cssVars, treeMate: this.treeMate, multiple: false, renderLabel: this.renderLabel, renderOption: this.renderOption, size: "medium", onToggle: this.handleToggle }), [[vdirs_1.clickoutside, this.handleClickOutsideMenu]])
-                                : null
+                            default: () => {
+                                var _a;
+                                (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                                return this.active
+                                    ? (0, vue_1.withDirectives)((0, vue_1.h)(_internal_1.NInternalSelectMenu, { clsPrefix: mergedClsPrefix, ref: "menuInstRef", theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
+                                            .InternalSelectMenu, "auto-pending": true, class: [
+                                            `${mergedClsPrefix}-auto-complete-menu`,
+                                            this.themeClass
+                                        ], style: this.cssVars, treeMate: this.treeMate, multiple: false, renderLabel: this.renderLabel, renderOption: this.renderOption, size: "medium", onToggle: this.handleToggle }), [[vdirs_1.clickoutside, this.handleClickOutsideMenu]])
+                                    : null;
+                            }
                         }))
                     })
                 ]

package/lib/avatar/src/Avatar.d.ts

@@ -136,7 +136,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-color-popover': string;
         '--n-bezier': string;
         '--n-merged-size': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     hasLoadError: import("vue").Ref<boolean>;
     handleError: (e: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/lib/avatar/src/Avatar.js

@@ -28,7 +28,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Avatar',
     props: exports.avatarProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const hasLoadErrorRef = (0, vue_1.ref)(false);
         let memoedTextHtml = null;
         const textRef = (0, vue_1.ref)(null);
@@ -85,54 +85,89 @@ exports.default = (0, vue_1.defineComponent)({
             }
         };
         (0, vue_1.watch)(() => props.src, () => (hasLoadErrorRef.value = false));
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const size = mergedSizeRef.value;
+            const round = mergedRoundRef.value;
+            const bordered = mergedBorderedRef.value;
+            const { color: propColor } = props;
+            const { self: { borderRadius, fontSize, color, border, colorModal, colorPopover }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            let height;
+            if (typeof size === 'number') {
+                height = `${size}px`;
+            }
+            else {
+                height = themeRef.value.self[(0, _utils_1.createKey)('height', size)];
+            }
+            return {
+                '--n-font-size': fontSize,
+                '--n-border': bordered ? border : 'none',
+                '--n-border-radius': round ? '50%' : borderRadius,
+                '--n-color': propColor || color,
+                '--n-color-modal': propColor || colorModal,
+                '--n-color-popover': propColor || colorPopover,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-merged-size': `var(--n-avatar-size-override, ${height})`
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('avatar', (0, vue_1.computed)(() => {
+                const size = mergedSizeRef.value;
+                const round = mergedRoundRef.value;
+                const bordered = mergedBorderedRef.value;
+                const { color } = props;
+                let hash = '';
+                if (size) {
+                    if (typeof size === 'number') {
+                        hash += `a${size}`;
+                    }
+                    else {
+                        hash += size[0];
+                    }
+                }
+                if (round) {
+                    hash += 'b';
+                }
+                if (bordered) {
+                    hash += 'c';
+                }
+                if (color) {
+                    hash += (0, _utils_1.color2Class)(color);
+                }
+                return hash;
+            }), cssVarsRef, props)
+            : undefined;
         return {
             textRef,
             selfRef,
             mergedRoundRef,
             mergedClsPrefix: mergedClsPrefixRef,
             fitTextTransform,
-            cssVars: (0, vue_1.computed)(() => {
-                const size = mergedSizeRef.value;
-                const round = mergedRoundRef.value;
-                const bordered = mergedBorderedRef.value;
-                const { color: propColor } = props;
-                const { self: { borderRadius, fontSize, color, border, colorModal, colorPopover }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                let height;
-                if (typeof size === 'number') {
-                    height = `${size}px`;
-                }
-                else {
-                    height = themeRef.value.self[(0, _utils_1.createKey)('height', size)];
-                }
-                return {
-                    '--n-font-size': fontSize,
-                    '--n-border': bordered ? border : 'none',
-                    '--n-border-radius': round ? '50%' : borderRadius,
-                    '--n-color': propColor || color,
-                    '--n-color-modal': propColor || colorModal,
-                    '--n-color-popover': propColor || colorPopover,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-merged-size': `var(--n-avatar-size-override, ${height})`
-                };
-            }),
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
             hasLoadError: hasLoadErrorRef,
             handleError
         };
     },
     render() {
-        const { $slots, src, mergedClsPrefix } = this;
+        const { $slots, src, mergedClsPrefix, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         let img;
         if (this.hasLoadError) {
             img = (0, vue_1.h)("img", { src: this.fallbackSrc, style: { objectFit: this.objectFit } });
         }
-        else if (!(!$slots.default && src)) {
-            img = ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.fitTextTransform }, {
-                default: () => ((0, vue_1.h)("span", { ref: "textRef", class: `${mergedClsPrefix}-avatar__text` }, $slots))
-            }));
-        }
         else {
-            img = ((0, vue_1.h)("img", { src: src, onError: this.handleError, style: { objectFit: this.objectFit } }));
+            img = (0, _utils_1.resolveWrappedSlot)($slots.default, (children) => {
+                if (children) {
+                    return ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.fitTextTransform }, {
+                        default: () => ((0, vue_1.h)("span", { ref: "textRef", class: `${mergedClsPrefix}-avatar__text` }, children))
+                    }));
+                }
+                else if (src) {
+                    return ((0, vue_1.h)("img", { src: src, onError: this.handleError, style: { objectFit: this.objectFit } }));
+                }
+            });
         }
-        return ((0, vue_1.h)("span", { ref: "selfRef", class: `${mergedClsPrefix}-avatar`, style: this.cssVars }, img));
+        return ((0, vue_1.h)("span", { ref: "selfRef", class: [`${mergedClsPrefix}-avatar`, this.themeClass], style: this.cssVars }, img));
     }
 });

package/lib/back-top/src/BackTop.d.ts

@@ -26,21 +26,9 @@ declare const backTopProps: {
         readonly type: FunctionConstructor;
         readonly default: () => void;
     };
-    readonly target: {
-        readonly type: PropType<() => HTMLElement | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onShow: {
-        readonly type: PropType<(() => void) | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onHide: {
-        readonly type: PropType<(() => void) | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly target: PropType<() => HTMLElement>;
+    readonly onShow: PropType<() => void>;
+    readonly onHide: PropType<() => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"BackTop", {
         color: string;
         textColor: string;
@@ -111,21 +99,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: FunctionConstructor;
         readonly default: () => void;
     };
-    readonly target: {
-        readonly type: PropType<() => HTMLElement | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onShow: {
-        readonly type: PropType<(() => void) | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onHide: {
-        readonly type: PropType<(() => void) | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly target: PropType<() => HTMLElement>;
+    readonly onShow: PropType<() => void>;
+    readonly onHide: PropType<() => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"BackTop", {
         color: string;
         textColor: string;
@@ -198,7 +174,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-icon-color-hover': string;
         '--n-icon-color-pressed': string;
         '--n-text-color': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    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 show: {
         readonly type: PropType<boolean | undefined>;
@@ -225,21 +203,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: FunctionConstructor;
         readonly default: () => void;
     };
-    readonly target: {
-        readonly type: PropType<() => HTMLElement | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onShow: {
-        readonly type: PropType<(() => void) | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onHide: {
-        readonly type: PropType<(() => void) | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly target: PropType<() => HTMLElement>;
+    readonly onShow: PropType<() => void>;
+    readonly onHide: PropType<() => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"BackTop", {
         color: string;
         textColor: string;
@@ -286,11 +252,8 @@ declare const _default: import("vue").DefineComponent<{
     right: string | number;
     bottom: string | number;
     show: boolean | undefined;
-    target: () => HTMLElement | undefined;
     to: string | HTMLElement;
     "onUpdate:show": Function;
-    onShow: (() => void) | undefined;
-    onHide: (() => void) | undefined;
     visibilityHeight: number;
 }>;
 export default _default;

package/lib/back-top/src/BackTop.js

@@ -33,35 +33,27 @@ const backTopProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
         default: () => { }
     }, 
     // deprecated
-    target: {
-        type: Function,
-        validator: () => {
-            (0, _utils_1.warn)('back-top', '`target` is deprecated, please use `listen-to` instead.');
-            return true;
-        },
-        default: undefined
-    }, onShow: {
-        type: Function,
-        validator: () => {
-            (0, _utils_1.warn)('back-top', '`on-show` is deprecated, please use `on-update:show` instead.');
-            return true;
-        },
-        default: undefined
-    }, onHide: {
-        type: Function,
-        validator: () => {
-            (0, _utils_1.warn)('back-top', '`on-hide` is deprecated, please use `on-update:show` instead.');
-            return true;
-        },
-        default: undefined
-    } });
+    target: Function, onShow: Function, onHide: Function });
 exports.default = (0, vue_1.defineComponent)({
     name: 'BackTop',
     // make style applied to back-top button
     inheritAttrs: false,
     props: backTopProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.target !== undefined) {
+                    (0, _utils_1.warnOnce)('back-top', '`target` is deprecated, please use `listen-to` instead.');
+                }
+                if (props.onShow !== undefined) {
+                    (0, _utils_1.warnOnce)('back-top', '`on-show` is deprecated, please use `on-update:show` instead.');
+                }
+                if (props.onHide !== undefined) {
+                    (0, _utils_1.warnOnce)('back-top', '`on-hide` is deprecated, please use `on-update:show` instead.');
+                }
+            });
+        }
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const scrollTopRef = (0, vue_1.ref)(null);
         const uncontrolledShowRef = (0, vue_1.computed)(() => {
             if (scrollTopRef.value === null)
@@ -162,6 +154,27 @@ exports.default = (0, vue_1.defineComponent)({
                 scrollElement.removeEventListener('scroll', handleScroll);
             }
         });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { color, boxShadow, boxShadowHover, boxShadowPressed, iconColor, iconColorHover, iconColorPressed, width, height, iconSize, borderRadius, textColor }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border-radius': borderRadius,
+                '--n-height': height,
+                '--n-width': width,
+                '--n-box-shadow': boxShadow,
+                '--n-box-shadow-hover': boxShadowHover,
+                '--n-box-shadow-pressed': boxShadowPressed,
+                '--n-color': color,
+                '--n-icon-size': iconSize,
+                '--n-icon-color': iconColor,
+                '--n-icon-color-hover': iconColorHover,
+                '--n-icon-color-pressed': iconColorPressed,
+                '--n-text-color': textColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('back-top', undefined, cssVarsRef, props)
+            : undefined;
         return {
             placeholderRef,
             style: styleRef,
@@ -175,24 +188,9 @@ exports.default = (0, vue_1.defineComponent)({
             handleAfterEnter,
             handleScroll,
             handleClick,
-            cssVars: (0, vue_1.computed)(() => {
-                const { self: { color, boxShadow, boxShadowHover, boxShadowPressed, iconColor, iconColorHover, iconColorPressed, width, height, iconSize, borderRadius, textColor }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-border-radius': borderRadius,
-                    '--n-height': height,
-                    '--n-width': width,
-                    '--n-box-shadow': boxShadow,
-                    '--n-box-shadow-hover': boxShadowHover,
-                    '--n-box-shadow-pressed': boxShadowPressed,
-                    '--n-color': color,
-                    '--n-icon-size': iconSize,
-                    '--n-icon-color': iconColor,
-                    '--n-icon-color-hover': iconColorHover,
-                    '--n-icon-color-pressed': iconColorPressed,
-                    '--n-text-color': textColor
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
@@ -200,20 +198,24 @@ exports.default = (0, vue_1.defineComponent)({
         return ((0, vue_1.h)("div", { ref: "placeholderRef", class: `${mergedClsPrefix}-back-top-placeholder`, style: "display: none", "aria-hidden": true },
             (0, vue_1.h)(vueuc_1.VLazyTeleport, { to: this.to, show: this.mergedShow }, {
                 default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onAfterEnter: this.handleAfterEnter }, {
-                    default: () => this.mergedShow
-                        ? (0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
-                            class: [
-                                `${mergedClsPrefix}-back-top`,
-                                {
-                                    [`${mergedClsPrefix}-back-top--transition-disabled`]: this.transitionDisabled
-                                }
-                            ],
-                            style: Object.assign(Object.assign({}, this.style), this.cssVars),
-                            onClick: this.handleClick
-                        }), [
-                            this.$slots.default ? (this.$slots.default()) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => BackTopIcon_1.default }))
-                        ])
-                        : null
+                    default: () => {
+                        var _a;
+                        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                        return this.mergedShow
+                            ? (0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
+                                class: [
+                                    `${mergedClsPrefix}-back-top`,
+                                    this.themeClass,
+                                    this.transitionDisabled &&
+                                        `${mergedClsPrefix}-back-top--transition-disabled`
+                                ],
+                                style: [this.style, this.cssVars],
+                                onClick: this.handleClick
+                            }), (0, _utils_1.resolveSlot)(this.$slots.default, () => [
+                                (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => BackTopIcon_1.default })
+                            ]))
+                            : null;
+                    }
                 }))
             })));
     }