naive-ui 2.25.3 → 2.25.6

package/es/input/src/InputGroupLabel.js

@@ -1,5 +1,5 @@
 import { computed, defineComponent, h } from 'vue';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { createKey } from '../../_utils';
 import { inputLight } from '../styles';
 import style from './styles/input-group-label.cssr';
@@ -14,32 +14,39 @@ export default defineComponent({
     name: 'InputGroupLabel',
     props: inputGroupLabelProps,
     setup(props) {
-        const { mergedBorderedRef, mergedClsPrefixRef } = useConfig(props);
+        const { mergedBorderedRef, mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Input', '-input-group-label', style, inputLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { size } = props;
+            const { common: { cubicBezierEaseInOut }, self: { groupLabelColor, borderRadius, groupLabelTextColor, lineHeight, groupLabelBorder, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-group-label-color': groupLabelColor,
+                '--n-group-label-border': groupLabelBorder,
+                '--n-border-radius': borderRadius,
+                '--n-group-label-text-color': groupLabelTextColor,
+                '--n-font-size': fontSize,
+                '--n-line-height': lineHeight,
+                '--n-height': height
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('input-group-label', computed(() => props.size[0]), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedBordered: mergedBorderedRef,
-            cssVars: computed(() => {
-                const { size } = props;
-                const { common: { cubicBezierEaseInOut }, self: { groupLabelColor, borderRadius, groupLabelTextColor, lineHeight, groupLabelBorder, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-group-label-color': groupLabelColor,
-                    '--n-group-label-border': groupLabelBorder,
-                    '--n-border-radius': borderRadius,
-                    '--n-group-label-text-color': groupLabelTextColor,
-                    '--n-font-size': fontSize,
-                    '--n-line-height': lineHeight,
-                    '--n-height': 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
         };
     },
     render() {
-        var _a, _b;
+        var _a, _b, _c;
         const { mergedClsPrefix } = this;
-        return (h("div", { class: `${mergedClsPrefix}-input-group-label`, style: this.cssVars }, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 :
-            _b.call(_a),
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        return (h("div", { class: [`${mergedClsPrefix}-input-group-label`, this.themeClass], style: this.cssVars }, (_c = (_b = this.$slots).default) === null || _c === void 0 ? void 0 :
+            _c.call(_b),
             this.mergedBordered ? (h("div", { class: `${mergedClsPrefix}-input-group-label__border` })) : null));
     }
 });

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

@@ -148,6 +148,7 @@ cE('textarea', `
  resize: none;
  white-space: pre-wrap;
  `), cE('textarea-mirror', `
+ width: 100%;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;

package/es/input/src/styles/rtl.cssr.d.ts

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

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

@@ -0,0 +1,16 @@
+import { cB, cE, cM } from '../../../_utils/cssr';
+export default cB('input', [cM('rtl', `
+ direction: rtl;
+ `, [cE('prefix', {
+  marginRight: 0,
+  marginLeft: '4px'
+}), cE('suffix', {
+  marginRight: '4px',
+  marginLeft: 0
+}), cM('textarea', 'width: 100%;', [cB('input-word-count', `
+ left: var(--n-padding-right);
+ right: unset;
+ `)]), cB('input-word-count', `
+ margin-left: 0;
+ margin-right: 4px;
+ `)])]);

package/es/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/es/input/styles/index.js

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

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

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

package/es/input/styles/rtl.js

@@ -0,0 +1,5 @@
+import rtlStyle from '../src/styles/rtl.cssr';
+export const inputRtl = {
+    name: 'Input',
+    style: rtlStyle
+};

package/es/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/es/input-number/src/InputNumber.js

@@ -11,6 +11,7 @@ import { warnOnce, call } from '../../_utils';
 import { inputNumberLight } from '../styles';
 import { parse, validator, format, parseNumber, isWipValue } from './utils';
 import style from './styles/input-number.cssr';
+import useRtl from '../../_mixins/use-rtl';
 const HOLDING_CHANGE_THRESHOLD = 800;
 const HOLDING_CHANGE_INTERVAL = 100;
 const inputNumberProps = Object.assign(Object.assign({}, useTheme.props), { loading: {
@@ -51,7 +52,7 @@ export default defineComponent({
                 }
             });
         }
-        const { mergedBorderedRef, mergedClsPrefixRef } = useConfig(props);
+        const { mergedBorderedRef, mergedClsPrefixRef, mergedRtlRef } = useConfig(props);
         const themeRef = useTheme('InputNumber', '-input-number', style, inputNumberLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale('InputNumber');
         const formItem = useFormItem(props);
@@ -398,7 +399,8 @@ export default 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 = useRtl('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,
@@ -426,7 +428,10 @@ export default defineComponent({
     },
     render() {
         const { mergedClsPrefix } = this;
-        return (h("div", { class: `${mergedClsPrefix}-input-number` },
+        return (h("div", { class: [
+                `${mergedClsPrefix}-input-number`,
+                this.rtlEnabled && `${mergedClsPrefix}-input-number--rtl`
+            ] },
             h(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/es/input-number/src/styles/rtl.cssr.d.ts

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

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

@@ -0,0 +1,4 @@
+import { cB, cM } from '../../../_utils/cssr';
+export default cB('input-number', [cM('rtl', `
+ direction: rtl;
+ `)]);

package/es/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/es/input-number/styles/index.js

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

package/es/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/es/input-number/styles/rtl.js

@@ -0,0 +1,8 @@
+import rtlStyle from '../src/styles/rtl.cssr';
+import { inputRtl } from '../../input/styles/rtl';
+import { buttonRtl } from '../../button/styles/rtl';
+export const inputNumberRtl = {
+    name: 'InputNumber',
+    style: rtlStyle,
+    peers: [inputRtl, buttonRtl]
+};

package/es/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/es/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/es/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/es/legacy-grid/src/styles/index.cssr.js

@@ -3,7 +3,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 [cM(`${prefixIndex}-span`, {
     width: percent
   }), cM(`${prefixIndex}-offset`, {

package/es/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/es/list/src/List.js

@@ -1,5 +1,5 @@
 import { computed, defineComponent, h, provide } from 'vue';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { createInjectionKey } from '../../_utils';
 import { listLight } from '../styles';
 import style from './styles/index.cssr';
@@ -15,36 +15,44 @@ export default defineComponent({
     name: 'List',
     props: listProps,
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('List', '-list', style, listLight, props, mergedClsPrefixRef);
         provide(listInjectionKey, {
             mergedClsPrefixRef
         });
+        const cssVarsRef = 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
+            ? useThemeClass('list', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: 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 (h("ul", { class: [
                 `${mergedClsPrefix}-list`,
-                this.bordered && `${mergedClsPrefix}-list--bordered`
+                this.bordered && `${mergedClsPrefix}-list--bordered`,
+                this.themeClass
             ], style: this.cssVars },
             $slots.header ? (h("div", { class: `${mergedClsPrefix}-list__header` }, $slots.header())) : null, (_a = $slots.default) === null || _a === void 0 ? void 0 :
             _a.call($slots),

package/es/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/es/loading-bar/src/LoadingBar.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { h, Transition, computed, defineComponent, inject, withDirectives, vShow, ref, nextTick } from 'vue';
-import { useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { loadingBarLight } from '../styles';
 import { loadingBarProviderInjectionKey } from './context';
 import style from './styles/index.cssr';
@@ -17,7 +17,8 @@ function createClassName(status, clsPrefix) {
 }
 export default defineComponent({
     name: 'LoadingBar',
-    setup() {
+    setup(props) {
+        const { inlineThemeDisabled } = useConfig();
         const { props: providerProps, mergedClsPrefixRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(loadingBarProviderInjectionKey);
@@ -111,6 +112,17 @@ export default defineComponent({
             });
         }
         const themeRef = useTheme('LoadingBar', '-loading-bar', style, loadingBarLight, providerProps, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { self: { height, colorError, colorLoading } } = themeRef.value;
+            return {
+                '--n-height': height,
+                '--n-color-loading': colorLoading,
+                '--n-color-error': colorError
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('loading-bar', undefined, cssVarsRef, providerProps)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             loadingBarRef,
@@ -125,14 +137,9 @@ export default defineComponent({
             handleAfterEnter,
             handleAfterLeave,
             mergedLoadingBarStyle,
-            cssVars: 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() {
@@ -140,11 +147,18 @@ export default defineComponent({
             return null;
         const { mergedClsPrefix } = this;
         return (h(Transition, { name: "fade-in-transition", appear: true, onEnter: this.handleEnter, onAfterEnter: this.handleAfterEnter, onAfterLeave: this.handleAfterLeave, css: !this.transitionDisabled }, {
-            default: () => withDirectives(h("div", { class: `${mergedClsPrefix}-loading-bar-container` },
-                h("div", { ref: "loadingBarRef", class: `${mergedClsPrefix}-loading-bar`, style: [
-                        this.cssVars,
-                        this.mergedLoadingBarStyle
-                    ] })), [[vShow, this.loading || (!this.loading && this.entering)]])
+            default: () => {
+                var _a;
+                (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                return withDirectives(h("div", { class: [
+                        `${mergedClsPrefix}-loading-bar-container`,
+                        this.themeClass
+                    ] },
+                    h("div", { ref: "loadingBarRef", class: [`${mergedClsPrefix}-loading-bar`], style: [
+                            this.cssVars,
+                            this.mergedLoadingBarStyle
+                        ] })), [[vShow, this.loading || (!this.loading && this.entering)]]);
+            }
         }));
     }
 });

package/es/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/es/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/es/mention/src/Mention.js

@@ -6,7 +6,7 @@ import { useIsMounted, useMergedState } from 'vooks';
 import { NInput } from '../../input';
 import { NInternalSelectMenu } from '../../_internal';
 import { call, useAdjustedTo, warn } from '../../_utils';
-import { useConfig, useFormItem, useTheme } from '../../_mixins';
+import { useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins';
 import { mentionLight } from '../styles';
 import { getRelativePosition } from './utils';
 import style from './styles/index.cssr';
@@ -48,7 +48,7 @@ export default defineComponent({
     name: 'Mention',
     props: mentionProps,
     setup(props) {
-        const { namespaceRef, mergedClsPrefixRef, mergedBorderedRef } = useConfig(props);
+        const { namespaceRef, mergedClsPrefixRef, mergedBorderedRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Mention', '-mention', style, mentionLight, props, mergedClsPrefixRef);
         const formItem = useFormItem(props);
         const inputInstRef = ref(null);
@@ -84,6 +84,15 @@ export default defineComponent({
         const uncontrolledValueRef = ref(props.defaultValue);
         const controlledValueRef = toRef(props, 'value');
         const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
+        const cssVarsRef = computed(() => {
+            const { self: { menuBoxShadow } } = themeRef.value;
+            return {
+                '--n-menu-box-shadow': menuBoxShadow
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('mention', undefined, cssVarsRef, props)
+            : undefined;
         function doUpdateShowMenu(show) {
             if (props.disabled)
                 return;
@@ -301,12 +310,9 @@ export default defineComponent({
             handleInputMouseDown,
             focus,
             blur,
-            cssVars: 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() {
@@ -333,8 +339,12 @@ export default defineComponent({
                     h(VFollower, { ref: "followerRef", placement: this.placement, show: this.showMenu, containerClass: this.namespace, to: this.adjustedTo, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey }, {
                         default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
                             default: () => {
-                                const { mergedTheme } = this;
-                                return this.showMenu ? (h(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 ? (h(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/es/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;
 }>;