naive-ui 2.25.3 → 2.25.6

package/lib/input/src/styles/rtl.cssr.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const cssr_1 = require("../../../_utils/cssr");
+
+exports.default = (0, cssr_1.cB)('input', [(0, cssr_1.cM)('rtl', `
+ direction: rtl;
+ `, [(0, cssr_1.cE)('prefix', {
+  marginRight: 0,
+  marginLeft: '4px'
+}), (0, cssr_1.cE)('suffix', {
+  marginRight: '4px',
+  marginLeft: 0
+}), (0, cssr_1.cM)('textarea', 'width: 100%;', [(0, cssr_1.cB)('input-word-count', `
+ left: var(--n-padding-right);
+ right: unset;
+ `)]), (0, cssr_1.cB)('input-word-count', `
+ margin-left: 0;
+ margin-right: 4px;
+ `)])]);

package/lib/input/styles/index.d.ts

@@ -1,3 +1,4 @@
 export { default as inputDark } from './dark';
 export { default as inputLight } from './light';
+export { inputRtl } from './rtl';
 export type { InputTheme, InputThemeVars } from './light';

package/lib/input/styles/index.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.inputLight = exports.inputDark = void 0;
+exports.inputRtl = exports.inputLight = exports.inputDark = void 0;
 var dark_1 = require("./dark");
 Object.defineProperty(exports, "inputDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
 var light_1 = require("./light");
 Object.defineProperty(exports, "inputLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
+var rtl_1 = require("./rtl");
+Object.defineProperty(exports, "inputRtl", { enumerable: true, get: function () { return rtl_1.inputRtl; } });

package/lib/input/styles/rtl.d.ts

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

package/lib/input/styles/rtl.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputRtl = void 0;
+const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
+exports.inputRtl = {
+    name: 'Input',
+    style: rtl_cssr_1.default
+};

package/lib/input-number/src/InputNumber.d.ts

@@ -1712,6 +1712,7 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }, {
+    rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     inputInstRef: import("vue").Ref<{
         wrapperElRef: HTMLElement | null;
         textareaElRef: HTMLTextAreaElement | null;

package/lib/input-number/src/InputNumber.js

@@ -16,6 +16,7 @@ const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const utils_1 = require("./utils");
 const input_number_cssr_1 = __importDefault(require("./styles/input-number.cssr"));
+const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
 const HOLDING_CHANGE_THRESHOLD = 800;
 const HOLDING_CHANGE_INTERVAL = 100;
 const inputNumberProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { loading: {
@@ -56,7 +57,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedBorderedRef, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedBorderedRef, mergedClsPrefixRef, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('InputNumber', '-input-number', input_number_cssr_1.default, styles_1.inputNumberLight, props, mergedClsPrefixRef);
         const { localeRef } = (0, _mixins_1.useLocale)('InputNumber');
         const formItem = (0, _mixins_1.useFormItem)(props);
@@ -403,7 +404,8 @@ exports.default = (0, vue_1.defineComponent)({
             focus: () => { var _a; return (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus(); },
             blur: () => { var _a; return (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.blur(); }
         };
-        return Object.assign(Object.assign({}, exposedMethods), { inputInstRef,
+        const rtlEnabledRef = (0, use_rtl_1.default)('InputNumber', mergedRtlRef, mergedClsPrefixRef);
+        return Object.assign(Object.assign({}, exposedMethods), { rtlEnabled: rtlEnabledRef, inputInstRef,
             minusButtonInstRef,
             addButtonInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, mergedPlaceholder: mergedPlaceholderRef, displayedValueInvalid: displayedValueInvalidRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, displayedValue: displayedValueRef, addable: addableRef, minusable: minusableRef, mergedStatus: mergedStatusRef, handleFocus,
             handleBlur,
@@ -431,7 +433,10 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         const { mergedClsPrefix } = this;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input-number` },
+        return ((0, vue_1.h)("div", { class: [
+                `${mergedClsPrefix}-input-number`,
+                this.rtlEnabled && `${mergedClsPrefix}-input-number--rtl`
+            ] },
             (0, vue_1.h)(input_1.NInput, { ref: "inputInstRef", status: this.mergedStatus, bordered: this.mergedBordered, loading: this.loading, value: this.displayedValue, onUpdateValue: this.handleUpdateDisplayedValue, theme: this.mergedTheme.peers.Input, themeOverrides: this.mergedTheme.peerOverrides.Input, builtinThemeOverrides: this.inputThemeOverrides, size: this.mergedSize, placeholder: this.mergedPlaceholder, disabled: this.mergedDisabled, readonly: this.readonly, textDecoration: this.displayedValueInvalid ? 'line-through' : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeydown: this.handleKeyDown, onMousedown: this.handleMouseDown, onClear: this.handleClear, clearable: this.clearable, internalLoadingBeforeSuffix: true }, {
                 prefix: () => { var _a, _b; return (_b = (_a = this.$slots).prefix) === null || _b === void 0 ? void 0 : _b.call(_a); },
                 suffix: () => {

package/lib/input-number/src/styles/rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/input-number/src/styles/rtl.cssr.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const cssr_1 = require("../../../_utils/cssr");
+
+exports.default = (0, cssr_1.cB)('input-number', [(0, cssr_1.cM)('rtl', `
+ direction: rtl;
+ `)]);

package/lib/input-number/styles/index.d.ts

@@ -1,3 +1,4 @@
 export { default as inputNumberDark } from './dark';
 export { default as inputNumberLight } from './light';
+export { inputNumberRtl } from './rtl';
 export type { InputNumberTheme, InputNumberThemeVars } from './light';

package/lib/input-number/styles/index.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.inputNumberLight = exports.inputNumberDark = void 0;
+exports.inputNumberRtl = exports.inputNumberLight = exports.inputNumberDark = void 0;
 var dark_1 = require("./dark");
 Object.defineProperty(exports, "inputNumberDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
 var light_1 = require("./light");
 Object.defineProperty(exports, "inputNumberLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
+var rtl_1 = require("./rtl");
+Object.defineProperty(exports, "inputNumberRtl", { enumerable: true, get: function () { return rtl_1.inputNumberRtl; } });

package/lib/input-number/styles/rtl.d.ts

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

package/lib/input-number/styles/rtl.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputNumberRtl = void 0;
+const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
+const rtl_1 = require("../../input/styles/rtl");
+const rtl_2 = require("../../button/styles/rtl");
+exports.inputNumberRtl = {
+    name: 'InputNumber',
+    style: rtl_cssr_1.default,
+    peers: [rtl_1.inputRtl, rtl_2.buttonRtl]
+};

package/lib/layout/src/Layout.d.ts

@@ -162,6 +162,7 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
     mergedClsPrefix: import("vue").ComputedRef<string>;
     scrollableElRef: import("vue").Ref<HTMLElement | null>;
     scrollbarInstRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;
@@ -558,6 +559,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     scrollableElRef: import("vue").Ref<HTMLElement | null>;
     scrollbarInstRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;

package/lib/layout/src/LayoutContent.d.ts

@@ -114,6 +114,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     scrollableElRef: import("vue").Ref<HTMLElement | null>;
     scrollbarInstRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;

package/lib/layout/src/LayoutSider.d.ts

@@ -201,6 +201,7 @@ declare const _default: import("vue").DefineComponent<{
     scrollTo: ((options: ScrollToOptions) => void) & ((x: number, y: number) => void);
     scrollableElRef: import("vue").Ref<HTMLElement | null>;
     scrollbarInstRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;

package/lib/legacy-grid/src/styles/index.cssr.js

@@ -10,7 +10,7 @@ const positionStyles = Array.apply(null, {
   length: 24
 }).map((_, index) => {
   const prefixIndex = index + 1;
-  const percent = (1 / 24 * prefixIndex * 100).toFixed(2) + '%';
+  const percent = `calc(100% / 24 * ${prefixIndex})`;
   return [(0, cssr_1.cM)(`${prefixIndex}-span`, {
     width: percent
   }), (0, cssr_1.cM)(`${prefixIndex}-offset`, {

package/lib/list/src/List.d.ts

@@ -103,7 +103,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-border-color-popover': string;
         '--n-color-modal': string;
         '--n-color-popover': string;
-    }>;
+    }> | undefined;
+    themeClass: 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<{
     size: {
         type: PropType<"small" | "medium" | "large">;

package/lib/list/src/List.js

@@ -21,36 +21,44 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'List',
     props: listProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('List', '-list', index_cssr_1.default, styles_1.listLight, props, mergedClsPrefixRef);
         (0, vue_1.provide)(exports.listInjectionKey, {
             mergedClsPrefixRef
         });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { fontSize, textColor, color, colorModal, colorPopover, borderColor, borderColorModal, borderColorPopover, borderRadius } } = themeRef.value;
+            return {
+                '--n-font-size': fontSize,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-text-color': textColor,
+                '--n-color': color,
+                '--n-border-radius': borderRadius,
+                '--n-border-color': borderColor,
+                '--n-border-color-modal': borderColorModal,
+                '--n-border-color-popover': borderColorPopover,
+                '--n-color-modal': colorModal,
+                '--n-color-popover': colorPopover
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('list', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut }, self: { fontSize, textColor, color, colorModal, colorPopover, borderColor, borderColorModal, borderColorPopover, borderRadius } } = themeRef.value;
-                return {
-                    '--n-font-size': fontSize,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-text-color': textColor,
-                    '--n-color': color,
-                    '--n-border-radius': borderRadius,
-                    '--n-border-color': borderColor,
-                    '--n-border-color-modal': borderColorModal,
-                    '--n-border-color-popover': borderColorPopover,
-                    '--n-color-modal': colorModal,
-                    '--n-color-popover': colorPopover
-                };
-            })
+            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;
-        const { $slots, mergedClsPrefix } = this;
+        const { $slots, mergedClsPrefix, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("ul", { class: [
                 `${mergedClsPrefix}-list`,
-                this.bordered && `${mergedClsPrefix}-list--bordered`
+                this.bordered && `${mergedClsPrefix}-list--bordered`,
+                this.themeClass
             ], style: this.cssVars },
             $slots.header ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list__header` }, $slots.header())) : null, (_a = $slots.default) === null || _a === void 0 ? void 0 :
             _a.call($slots),

package/lib/loading-bar/src/LoadingBar.d.ts

@@ -16,6 +16,8 @@ declare const _default: import("vue").DefineComponent<{}, {
         '--n-height': string;
         '--n-color-loading': string;
         '--n-color-error': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/lib/loading-bar/src/LoadingBar.js

@@ -22,7 +22,8 @@ function createClassName(status, clsPrefix) {
 }
 exports.default = (0, vue_1.defineComponent)({
     name: 'LoadingBar',
-    setup() {
+    setup(props) {
+        const { inlineThemeDisabled } = (0, _mixins_1.useConfig)();
         const { props: providerProps, mergedClsPrefixRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(context_1.loadingBarProviderInjectionKey);
@@ -116,6 +117,17 @@ exports.default = (0, vue_1.defineComponent)({
             });
         }
         const themeRef = (0, _mixins_1.useTheme)('LoadingBar', '-loading-bar', index_cssr_1.default, styles_1.loadingBarLight, providerProps, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { height, colorError, colorLoading } } = themeRef.value;
+            return {
+                '--n-height': height,
+                '--n-color-loading': colorLoading,
+                '--n-color-error': colorError
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('loading-bar', undefined, cssVarsRef, providerProps)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             loadingBarRef,
@@ -130,14 +142,9 @@ exports.default = (0, vue_1.defineComponent)({
             handleAfterEnter,
             handleAfterLeave,
             mergedLoadingBarStyle,
-            cssVars: (0, vue_1.computed)(() => {
-                const { self: { height, colorError, colorLoading } } = themeRef.value;
-                return {
-                    '--n-height': height,
-                    '--n-color-loading': colorLoading,
-                    '--n-color-error': colorError
-                };
-            })
+            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() {
@@ -145,11 +152,18 @@ exports.default = (0, vue_1.defineComponent)({
             return null;
         const { mergedClsPrefix } = this;
         return ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", appear: true, onEnter: this.handleEnter, onAfterEnter: this.handleAfterEnter, onAfterLeave: this.handleAfterLeave, css: !this.transitionDisabled }, {
-            default: () => (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${mergedClsPrefix}-loading-bar-container` },
-                (0, vue_1.h)("div", { ref: "loadingBarRef", class: `${mergedClsPrefix}-loading-bar`, style: [
-                        this.cssVars,
-                        this.mergedLoadingBarStyle
-                    ] })), [[vue_1.vShow, this.loading || (!this.loading && this.entering)]])
+            default: () => {
+                var _a;
+                (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: [
+                        `${mergedClsPrefix}-loading-bar-container`,
+                        this.themeClass
+                    ] },
+                    (0, vue_1.h)("div", { ref: "loadingBarRef", class: [`${mergedClsPrefix}-loading-bar`], style: [
+                            this.cssVars,
+                            this.mergedLoadingBarStyle
+                        ] })), [[vue_1.vShow, this.loading || (!this.loading && this.entering)]]);
+            }
         }));
     }
 });

package/lib/log/src/Log.d.ts

@@ -244,6 +244,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     scrollbarRef: Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;

package/lib/mention/src/Mention.d.ts

@@ -1104,7 +1104,9 @@ declare const _default: import("vue").DefineComponent<{
     blur: () => void;
     cssVars: import("vue").ComputedRef<{
         '--n-menu-box-shadow': 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 to: {
         type: PropType<string | boolean | HTMLElement>;

package/lib/mention/src/Mention.js

@@ -53,7 +53,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Mention',
     props: mentionProps,
     setup(props) {
-        const { namespaceRef, mergedClsPrefixRef, mergedBorderedRef } = (0, _mixins_1.useConfig)(props);
+        const { namespaceRef, mergedClsPrefixRef, mergedBorderedRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Mention', '-mention', index_cssr_1.default, styles_1.mentionLight, props, mergedClsPrefixRef);
         const formItem = (0, _mixins_1.useFormItem)(props);
         const inputInstRef = (0, vue_1.ref)(null);
@@ -89,6 +89,15 @@ exports.default = (0, vue_1.defineComponent)({
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
         const controlledValueRef = (0, vue_1.toRef)(props, 'value');
         const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { menuBoxShadow } } = themeRef.value;
+            return {
+                '--n-menu-box-shadow': menuBoxShadow
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('mention', undefined, cssVarsRef, props)
+            : undefined;
         function doUpdateShowMenu(show) {
             if (props.disabled)
                 return;
@@ -306,12 +315,9 @@ exports.default = (0, vue_1.defineComponent)({
             handleInputMouseDown,
             focus,
             blur,
-            cssVars: (0, vue_1.computed)(() => {
-                const { self: { menuBoxShadow } } = themeRef.value;
-                return {
-                    '--n-menu-box-shadow': menuBoxShadow
-                };
-            })
+            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() {
@@ -338,8 +344,12 @@ exports.default = (0, vue_1.defineComponent)({
                     (0, vue_1.h)(vueuc_1.VFollower, { ref: "followerRef", placement: this.placement, show: this.showMenu, containerClass: this.namespace, to: this.adjustedTo, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey }, {
                         default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
                             default: () => {
-                                const { mergedTheme } = this;
-                                return this.showMenu ? ((0, vue_1.h)(_internal_1.NInternalSelectMenu, { clsPrefix: mergedClsPrefix, theme: mergedTheme.peers.InternalSelectMenu, themeOverrides: mergedTheme.peerOverrides.InternalSelectMenu, autoPending: true, ref: "selectMenuInstRef", class: `${mergedClsPrefix}-mention-menu`, loading: this.loading, treeMate: this.treeMate, virtualScroll: false, style: this.cssVars, onToggle: this.handleSelect, renderLabel: this.renderLabel }, $slots)) : null;
+                                const { mergedTheme, onRender } = this;
+                                onRender === null || onRender === void 0 ? void 0 : onRender();
+                                return this.showMenu ? ((0, vue_1.h)(_internal_1.NInternalSelectMenu, { clsPrefix: mergedClsPrefix, theme: mergedTheme.peers.InternalSelectMenu, themeOverrides: mergedTheme.peerOverrides.InternalSelectMenu, autoPending: true, ref: "selectMenuInstRef", class: [
+                                        `${mergedClsPrefix}-mention-menu`,
+                                        this.themeClass
+                                    ], loading: this.loading, treeMate: this.treeMate, virtualScroll: false, style: this.cssVars, onToggle: this.handleSelect, renderLabel: this.renderLabel }, $slots)) : null;
                             }
                         }))
                     })

package/lib/message/src/Message.d.ts

@@ -8,6 +8,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "info";
     };
     content: PropType<string | number | (() => VNodeChild)>;
+    showIcon: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     closable: BooleanConstructor;
     keepAliveOnHover: BooleanConstructor;
     onClose: PropType<() => void>;
@@ -17,30 +21,9 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").Ref<string>;
     messageProviderProps: import("./MessageProvider").MessageProviderSetupProps;
     handleClose(): void;
-    cssVars: import("vue").ComputedRef<{
-        '--n-bezier': string;
-        '--n-margin': string;
-        '--n-padding': string;
-        '--n-max-width': string;
-        '--n-font-size': string;
-        '--n-icon-margin': string;
-        '--n-icon-size': string;
-        '--n-close-size': string;
-        '--n-close-margin': string;
-        '--n-text-color': string;
-        '--n-color': string;
-        '--n-box-shadow': string;
-        '--n-icon-color-info': string;
-        '--n-icon-color-success': string;
-        '--n-icon-color-warning': string;
-        '--n-icon-color-error': string;
-        '--n-icon-color-loading': string;
-        '--n-close-color': string;
-        '--n-close-color-pressed': string;
-        '--n-close-color-hover': string;
-        '--n-line-height': string;
-        '--n-border-radius': string;
-    }>;
+    cssVars: false | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     placement: "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     render: PropType<MessageRenderMessage>;
@@ -50,6 +33,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "info";
     };
     content: PropType<string | number | (() => VNodeChild)>;
+    showIcon: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     closable: BooleanConstructor;
     keepAliveOnHover: BooleanConstructor;
     onClose: PropType<() => void>;
@@ -57,6 +44,7 @@ declare const _default: import("vue").DefineComponent<{
     onMouseleave: PropType<(e: MouseEvent) => void>;
 }>>, {
     type: MessageType;
+    showIcon: boolean;
     closable: boolean;
     keepAliveOnHover: boolean;
 }>;