naive-ui 2.25.2 → 2.25.3

package/es/alert/src/Alert.js

@@ -2,8 +2,8 @@ import { h, ref, computed, defineComponent, mergeProps } from 'vue';
 import { getMargin } from 'seemly';
 import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from '../../_internal/icons';
 import { NFadeInExpandTransition, NBaseClose, NBaseIcon } from '../../_internal';
-import { useConfig, useTheme } from '../../_mixins';
-import { warn, createKey } from '../../_utils';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { warn, createKey, resolveSlot, resolveWrappedSlot } from '../../_utils';
 import { alertLight } from '../styles';
 import style from './styles/index.cssr';
 const alertProps = Object.assign(Object.assign({}, useTheme.props), { title: {
@@ -36,9 +36,9 @@ export default defineComponent({
     inheritAttrs: false,
     props: alertProps,
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Alert', '-alert', style, alertLight, props, mergedClsPrefixRef);
-        const cssVars = computed(() => {
+        const cssVarsRef = computed(() => {
             const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
             const { fontSize, borderRadius, titleFontWeight, lineHeight, iconSize, iconMargin, closeSize, closeMargin, padding } = self;
             const { type } = props;
@@ -66,6 +66,11 @@ export default defineComponent({
                 '--n-icon-margin-right': right
             };
         });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('alert', computed(() => {
+                return props.type[0];
+            }), cssVarsRef, props)
+            : undefined;
         const visibleRef = ref(true);
         const doAfterLeave = () => {
             const { onAfterLeave, onAfterHide // deprecated
@@ -92,16 +97,21 @@ export default 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 (h(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,
@@ -109,24 +119,29 @@ export default defineComponent({
                 };
                 return this.visible ? (h("div", Object.assign({}, mergeProps(this.$attrs, attrs)),
                     this.closable && (h(NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-alert__close`, onClick: this.handleCloseClick })),
-                    this.showIcon && (h("div", { class: `${mergedClsPrefix}-alert__icon`, "aria-hidden": "true" }, $slots.icon ? ($slots.icon()) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                        default: () => {
-                            switch (this.type) {
-                                case 'success':
-                                    return h(SuccessIcon, null);
-                                case 'info':
-                                    return h(InfoIcon, null);
-                                case 'warning':
-                                    return h(WarningIcon, null);
-                                case 'error':
-                                    return h(ErrorIcon, null);
-                                default:
-                                    return null;
+                    this.showIcon && (h("div", { class: `${mergedClsPrefix}-alert__icon`, "aria-hidden": "true" }, resolveSlot($slots.icon, () => [
+                        h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                            default: () => {
+                                switch (this.type) {
+                                    case 'success':
+                                        return h(SuccessIcon, null);
+                                    case 'info':
+                                        return h(InfoIcon, null);
+                                    case 'warning':
+                                        return h(WarningIcon, null);
+                                    case 'error':
+                                        return h(ErrorIcon, null);
+                                    default:
+                                        return null;
+                                }
                             }
-                        }
-                    })))),
+                        })
+                    ]))),
                     h("div", { class: `${mergedClsPrefix}-alert-body` },
-                        this.title || $slots.header ? (h("div", { class: `${mergedClsPrefix}-alert-body__title` }, $slots.header ? $slots.header() : this.title)) : null,
+                        resolveWrappedSlot($slots.header, (children) => {
+                            const mergedChildren = children || this.title;
+                            return mergedChildren ? (h("div", { class: `${mergedClsPrefix}-alert-body__title` }, mergedChildren)) : null;
+                        }),
                         $slots.default && (h("div", { class: `${mergedClsPrefix}-alert-body__content` }, $slots))))) : null;
             }
         }));

package/es/anchor/src/AnchorAdapter.js

@@ -1,7 +1,7 @@
 import { h, defineComponent, computed, ref } from 'vue';
 import { NAffix } from '../../affix';
 import { affixProps, affixPropKeys } from '../../affix/src/Affix';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { keep } from '../../_utils';
 import { anchorLight } from '../styles';
 import style from './styles/index.cssr';
@@ -11,7 +11,7 @@ export default defineComponent({
     name: 'Anchor',
     props: anchorProps,
     setup(props, { slots }) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Anchor', '-anchor', style, anchorLight, props, mergedClsPrefixRef);
         const anchorRef = ref(null);
         const cssVarsRef = computed(() => {
@@ -31,13 +31,19 @@ export default defineComponent({
                 '--n-rail-width': railWidth
             };
         });
+        const themeClassHandle = inlineThemeDisabled
+            ? 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 (h(NBaseAnchor, Object.assign({ ref: anchorRef, style: cssVarsRef.value }, keep(props, baseAnchorPropKeys), { mergedClsPrefix: mergedClsPrefixRef.value }), slots));
+                themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender();
+                return (h(NBaseAnchor, Object.assign({ ref: anchorRef, style: inlineThemeDisabled
+                        ? undefined
+                        : cssVarsRef.value, class: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass.value }, keep(props, baseAnchorPropKeys), { mergedClsPrefix: mergedClsPrefixRef.value }), slots));
             }
         };
     },

package/es/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>;

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

@@ -4,7 +4,7 @@ import { VBinder, VTarget, VFollower } from 'vueuc';
 import { clickoutside } from 'vdirs';
 import { useIsMounted, useMergedState } from 'vooks';
 import { tmOptions } from '../../select/src/utils';
-import { useFormItem, useTheme, useConfig } from '../../_mixins';
+import { useFormItem, useTheme, useConfig, useThemeClass } from '../../_mixins';
 import { call, useAdjustedTo, getFirstSlotVNode, warnOnce } from '../../_utils';
 import { NInternalSelectMenu } from '../../_internal';
 import { NInput } from '../../input';
@@ -46,7 +46,7 @@ export default defineComponent({
                 }
             });
         }
-        const { mergedBorderedRef, namespaceRef, mergedClsPrefixRef } = useConfig(props);
+        const { mergedBorderedRef, namespaceRef, mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const formItem = useFormItem(props);
         const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
         const triggerElRef = ref(null);
@@ -183,6 +183,16 @@ export default defineComponent({
                 (_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.blur();
             }
         }
+        const cssVarsRef = computed(() => {
+            const { common: { cubicBezierEaseInOut }, self: { menuBoxShadow } } = themeRef.value;
+            return {
+                '--n-menu-box-shadow': menuBoxShadow,
+                '--n-bezier': cubicBezierEaseInOut
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('auto-complete', undefined, cssVarsRef, props)
+            : undefined;
         return {
             uncontrolledValue: uncontrolledValueRef,
             mergedValue: mergedValueRef,
@@ -205,13 +215,9 @@ export default defineComponent({
             handleCompositionEnd,
             handleKeyDown,
             mergedTheme: themeRef,
-            cssVars: 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
@@ -235,17 +241,24 @@ export default defineComponent({
                             }
                             const { mergedTheme } = this;
                             return (h(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); }
                             }));
                         }
                     }),
                     h(VFollower, { show: this.active, to: this.adjustedTo, containerClass: this.namespace, zIndex: this.zIndex, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, placement: this.placement, width: "target" }, {
                         default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
-                            default: () => this.active
-                                ? withDirectives(h(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 }), [[clickoutside, this.handleClickOutsideMenu]])
-                                : null
+                            default: () => {
+                                var _a;
+                                (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                                return this.active
+                                    ? withDirectives(h(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 }), [[clickoutside, this.handleClickOutsideMenu]])
+                                    : null;
+                            }
                         }))
                     })
                 ]

package/es/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/es/avatar/src/Avatar.js

@@ -2,9 +2,9 @@ import { h, ref, computed, defineComponent, inject, watch } from 'vue';
 import { VResizeObserver } from 'vueuc';
 import { avatarGroupInjectionKey } from './context';
 import { tagInjectionKey } from '../../tag/src/Tag';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { avatarLight } from '../styles';
-import { createKey } from '../../_utils';
+import { createKey, color2Class, resolveWrappedSlot } from '../../_utils';
 import style from './styles/index.cssr';
 export const avatarProps = Object.assign(Object.assign({}, useTheme.props), { size: [String, Number], src: String, circle: {
         type: Boolean,
@@ -22,7 +22,7 @@ export default defineComponent({
     name: 'Avatar',
     props: avatarProps,
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const hasLoadErrorRef = ref(false);
         let memoedTextHtml = null;
         const textRef = ref(null);
@@ -79,54 +79,89 @@ export default defineComponent({
             }
         };
         watch(() => props.src, () => (hasLoadErrorRef.value = false));
+        const cssVarsRef = 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[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
+            ? useThemeClass('avatar', 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 += color2Class(color);
+                }
+                return hash;
+            }), cssVarsRef, props)
+            : undefined;
         return {
             textRef,
             selfRef,
             mergedRoundRef,
             mergedClsPrefix: mergedClsPrefixRef,
             fitTextTransform,
-            cssVars: 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[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 = h("img", { src: this.fallbackSrc, style: { objectFit: this.objectFit } });
         }
-        else if (!(!$slots.default && src)) {
-            img = (h(VResizeObserver, { onResize: this.fitTextTransform }, {
-                default: () => (h("span", { ref: "textRef", class: `${mergedClsPrefix}-avatar__text` }, $slots))
-            }));
-        }
         else {
-            img = (h("img", { src: src, onError: this.handleError, style: { objectFit: this.objectFit } }));
+            img = resolveWrappedSlot($slots.default, (children) => {
+                if (children) {
+                    return (h(VResizeObserver, { onResize: this.fitTextTransform }, {
+                        default: () => (h("span", { ref: "textRef", class: `${mergedClsPrefix}-avatar__text` }, children))
+                    }));
+                }
+                else if (src) {
+                    return (h("img", { src: src, onError: this.handleError, style: { objectFit: this.objectFit } }));
+                }
+            });
         }
-        return (h("span", { ref: "selfRef", class: `${mergedClsPrefix}-avatar`, style: this.cssVars }, img));
+        return (h("span", { ref: "selfRef", class: [`${mergedClsPrefix}-avatar`, this.themeClass], style: this.cssVars }, img));
     }
 });

package/es/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/es/back-top/src/BackTop.js

@@ -1,10 +1,10 @@
-import { h, ref, computed, toRef, watch, nextTick, defineComponent, mergeProps, Transition, onMounted, onBeforeUnmount } from 'vue';
+import { h, ref, computed, toRef, watch, nextTick, defineComponent, mergeProps, Transition, onMounted, onBeforeUnmount, watchEffect } from 'vue';
 import { VLazyTeleport } from 'vueuc';
 import { useIsMounted, useMergedState } from 'vooks';
 import { getScrollParent, unwrapElement } from 'seemly';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { NBaseIcon } from '../../_internal';
-import { formatLength, warn } from '../../_utils';
+import { formatLength, resolveSlot, warn, warnOnce } from '../../_utils';
 import { backTopLight } from '../styles';
 import BackTopIcon from './BackTopIcon';
 import style from './styles/index.cssr';
@@ -28,35 +28,27 @@ const backTopProps = Object.assign(Object.assign({}, useTheme.props), { show: {
         default: () => { }
     }, 
     // deprecated
-    target: {
-        type: Function,
-        validator: () => {
-            warn('back-top', '`target` is deprecated, please use `listen-to` instead.');
-            return true;
-        },
-        default: undefined
-    }, onShow: {
-        type: Function,
-        validator: () => {
-            warn('back-top', '`on-show` is deprecated, please use `on-update:show` instead.');
-            return true;
-        },
-        default: undefined
-    }, onHide: {
-        type: Function,
-        validator: () => {
-            warn('back-top', '`on-hide` is deprecated, please use `on-update:show` instead.');
-            return true;
-        },
-        default: undefined
-    } });
+    target: Function, onShow: Function, onHide: Function });
 export default defineComponent({
     name: 'BackTop',
     // make style applied to back-top button
     inheritAttrs: false,
     props: backTopProps,
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.target !== undefined) {
+                    warnOnce('back-top', '`target` is deprecated, please use `listen-to` instead.');
+                }
+                if (props.onShow !== undefined) {
+                    warnOnce('back-top', '`on-show` is deprecated, please use `on-update:show` instead.');
+                }
+                if (props.onHide !== undefined) {
+                    warnOnce('back-top', '`on-hide` is deprecated, please use `on-update:show` instead.');
+                }
+            });
+        }
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const scrollTopRef = ref(null);
         const uncontrolledShowRef = computed(() => {
             if (scrollTopRef.value === null)
@@ -157,6 +149,27 @@ export default defineComponent({
                 scrollElement.removeEventListener('scroll', handleScroll);
             }
         });
+        const cssVarsRef = 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
+            ? useThemeClass('back-top', undefined, cssVarsRef, props)
+            : undefined;
         return {
             placeholderRef,
             style: styleRef,
@@ -170,24 +183,9 @@ export default defineComponent({
             handleAfterEnter,
             handleScroll,
             handleClick,
-            cssVars: 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() {
@@ -195,20 +193,24 @@ export default defineComponent({
         return (h("div", { ref: "placeholderRef", class: `${mergedClsPrefix}-back-top-placeholder`, style: "display: none", "aria-hidden": true },
             h(VLazyTeleport, { to: this.to, show: this.mergedShow }, {
                 default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onAfterEnter: this.handleAfterEnter }, {
-                    default: () => this.mergedShow
-                        ? h('div', 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()) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => BackTopIcon }))
-                        ])
-                        : null
+                    default: () => {
+                        var _a;
+                        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                        return this.mergedShow
+                            ? h('div', mergeProps(this.$attrs, {
+                                class: [
+                                    `${mergedClsPrefix}-back-top`,
+                                    this.themeClass,
+                                    this.transitionDisabled &&
+                                        `${mergedClsPrefix}-back-top--transition-disabled`
+                                ],
+                                style: [this.style, this.cssVars],
+                                onClick: this.handleClick
+                            }), resolveSlot(this.$slots.default, () => [
+                                h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => BackTopIcon })
+                            ]))
+                            : null;
+                    }
                 }))
             })));
     }