naive-ui 2.25.4 → 2.25.7

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/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.js

@@ -316,9 +316,7 @@ export default defineComponent({
         };
     },
     render() {
-        var _a;
         const { mergedTheme, mergedClsPrefix, $slots } = this;
-        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return (h("div", { class: `${mergedClsPrefix}-mention` },
             h(NInput, { status: this.mergedStatus, themeOverrides: mergedTheme.peerOverrides.Input, theme: mergedTheme.peers.Input, size: this.mergedSize, autosize: this.autosize, type: this.type, ref: "inputInstRef", placeholder: this.placeholder, onMousedown: this.handleInputMouseDown, onUpdateValue: this.handleInputUpdateValue, onKeydown: this.handleInputKeyDown, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, bordered: this.mergedBordered, disabled: this.disabled, value: this.mergedValue }),
             h(VBinder, null, {
@@ -341,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;
 }>;

package/es/message/src/Message.js

@@ -2,7 +2,7 @@ import { computed, h, defineComponent, inject } from 'vue';
 import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from '../../_internal/icons';
 import { NIconSwitchTransition, NBaseLoading, NBaseIcon, NBaseClose } from '../../_internal';
 import { render, createKey } from '../../_utils';
-import { useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { messageLight } from '../styles';
 import { messageProps } from './message-props';
 import { messageProviderInjectionKey } from './context';
@@ -11,16 +11,49 @@ const iconMap = {
     info: h(InfoIcon, null),
     success: h(SuccessIcon, null),
     warning: h(WarningIcon, null),
-    error: h(ErrorIcon, null)
+    error: h(ErrorIcon, null),
+    default: null
 };
 export default defineComponent({
     name: 'Message',
     props: Object.assign(Object.assign({}, messageProps), { render: Function }),
     setup(props) {
+        const { inlineThemeDisabled } = useConfig();
         const { props: messageProviderProps, mergedClsPrefixRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(messageProviderInjectionKey);
         const themeRef = useTheme('Message', '-message', style, messageLight, messageProviderProps, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { type } = props;
+            const { common: { cubicBezierEaseInOut }, self: { padding, margin, maxWidth, iconMargin, closeMargin, closeSize, iconSize, fontSize, lineHeight, borderRadius, iconColorInfo, iconColorSuccess, iconColorWarning, iconColorError, iconColorLoading, [createKey('textColor', type)]: textColor, [createKey('boxShadow', type)]: boxShadow, [createKey('color', type)]: color, [createKey('closeColor', type)]: closeColor, [createKey('closeColorPressed', type)]: closeColorPressed, [createKey('closeColorHover', type)]: closeColorHover } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-margin': margin,
+                '--n-padding': padding,
+                '--n-max-width': maxWidth,
+                '--n-font-size': fontSize,
+                '--n-icon-margin': iconMargin,
+                '--n-icon-size': iconSize,
+                '--n-close-size': closeSize,
+                '--n-close-margin': closeMargin,
+                '--n-text-color': textColor,
+                '--n-color': color,
+                '--n-box-shadow': boxShadow,
+                '--n-icon-color-info': iconColorInfo,
+                '--n-icon-color-success': iconColorSuccess,
+                '--n-icon-color-warning': iconColorWarning,
+                '--n-icon-color-error': iconColorError,
+                '--n-icon-color-loading': iconColorLoading,
+                '--n-close-color': closeColor,
+                '--n-close-color-pressed': closeColorPressed,
+                '--n-close-color-hover': closeColorHover,
+                '--n-line-height': lineHeight,
+                '--n-border-radius': borderRadius
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('message', computed(() => props.type[0]), cssVarsRef, {})
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             messageProviderProps,
@@ -28,48 +61,29 @@ export default defineComponent({
                 var _a;
                 (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
             },
-            cssVars: computed(() => {
-                const { type } = props;
-                const { common: { cubicBezierEaseInOut }, self: { padding, margin, maxWidth, iconMargin, closeMargin, closeSize, iconSize, fontSize, lineHeight, borderRadius, iconColorInfo, iconColorSuccess, iconColorWarning, iconColorError, iconColorLoading, [createKey('textColor', type)]: textColor, [createKey('boxShadow', type)]: boxShadow, [createKey('color', type)]: color, [createKey('closeColor', type)]: closeColor, [createKey('closeColorPressed', type)]: closeColorPressed, [createKey('closeColorHover', type)]: closeColorHover } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-margin': margin,
-                    '--n-padding': padding,
-                    '--n-max-width': maxWidth,
-                    '--n-font-size': fontSize,
-                    '--n-icon-margin': iconMargin,
-                    '--n-icon-size': iconSize,
-                    '--n-close-size': closeSize,
-                    '--n-close-margin': closeMargin,
-                    '--n-text-color': textColor,
-                    '--n-color': color,
-                    '--n-box-shadow': boxShadow,
-                    '--n-icon-color-info': iconColorInfo,
-                    '--n-icon-color-success': iconColorSuccess,
-                    '--n-icon-color-warning': iconColorWarning,
-                    '--n-icon-color-error': iconColorError,
-                    '--n-icon-color-loading': iconColorLoading,
-                    '--n-close-color': closeColor,
-                    '--n-close-color-pressed': closeColorPressed,
-                    '--n-close-color-hover': closeColorHover,
-                    '--n-line-height': lineHeight,
-                    '--n-border-radius': borderRadius
-                };
-            }),
+            cssVars: inlineThemeDisabled ? undefined : inlineThemeDisabled,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
             placement: messageProviderProps.placement
         };
     },
     render() {
-        const { render: renderMessage, type, closable, content, mergedClsPrefix, cssVars, icon, handleClose } = this;
-        return (h("div", { class: `${mergedClsPrefix}-message-wrapper`, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave, style: Object.assign({
-                alignItems: this.placement.startsWith('top')
-                    ? 'flex-start'
-                    : 'flex-end'
-            }, cssVars) }, renderMessage ? (renderMessage(this.$props)) : (h("div", { class: `${mergedClsPrefix}-message ${mergedClsPrefix}-message--${type}-type` },
-            h("div", { class: `${mergedClsPrefix}-message__icon ${mergedClsPrefix}-message__icon--${type}-type` },
+        const { render: renderMessage, type, closable, content, mergedClsPrefix, cssVars, themeClass, onRender, icon, handleClose, showIcon } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        let iconNode;
+        return (h("div", { class: [`${mergedClsPrefix}-message-wrapper`, themeClass], onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave, style: [
+                {
+                    alignItems: this.placement.startsWith('top')
+                        ? 'flex-start'
+                        : 'flex-end'
+                },
+                cssVars
+            ] }, renderMessage ? (renderMessage(this.$props)) : (h("div", { class: `${mergedClsPrefix}-message ${mergedClsPrefix}-message--${type}-type` },
+            (iconNode = createIconVNode(icon, type, mergedClsPrefix)) &&
+                showIcon ? (h("div", { class: `${mergedClsPrefix}-message__icon ${mergedClsPrefix}-message__icon--${type}-type` },
                 h(NIconSwitchTransition, null, {
-                    default: () => [createIconVNode(icon, type, mergedClsPrefix)]
-                })),
+                    default: () => iconNode
+                }))) : null,
             h("div", { class: `${mergedClsPrefix}-message__content` }, render(content)),
             closable ? (h(NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-message__close`, onClick: handleClose })) : null))));
     }
@@ -79,8 +93,11 @@ function createIconVNode(icon, type, clsPrefix) {
         return icon();
     }
     else {
+        const innerIcon = type === 'loading' ? (h(NBaseLoading, { clsPrefix: clsPrefix, strokeWidth: 24, scale: 0.85 })) : (iconMap[type]);
+        if (!innerIcon)
+            return null;
         return (h(NBaseIcon, { clsPrefix: clsPrefix, key: type }, {
-            default: () => type === 'loading' ? (h(NBaseLoading, { clsPrefix: clsPrefix, strokeWidth: 24, scale: 0.85 })) : (iconMap[type])
+            default: () => innerIcon
         }));
     }
 }

package/es/message/src/MessageEnvironment.d.ts

@@ -19,6 +19,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "info";
     };
     content: PropType<string | number | (() => import("vue").VNodeChild)>;
+    showIcon: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     closable: BooleanConstructor;
     keepAliveOnHover: BooleanConstructor;
     onClose: PropType<() => void>;
@@ -52,6 +56,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "info";
     };
     content: PropType<string | number | (() => import("vue").VNodeChild)>;
+    showIcon: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     closable: BooleanConstructor;
     keepAliveOnHover: BooleanConstructor;
     onClose: PropType<() => void>;
@@ -60,6 +68,7 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     type: import("./types").MessageType;
     duration: number;
+    showIcon: boolean;
     closable: boolean;
     keepAliveOnHover: boolean;
 }>;

package/es/message/src/MessageEnvironment.js

@@ -84,7 +84,7 @@ export default defineComponent({
     render() {
         return (h(NFadeInExpandTransition, { appear: true, onAfterLeave: this.handleAfterLeave, onLeave: this.onLeave }, {
             default: () => [
-                this.show ? (h(NMessage, { content: this.content, type: this.type, icon: this.icon, closable: this.closable, onClose: this.handleClose, onMouseenter: this.keepAliveOnHover ? this.handleMouseenter : undefined, onMouseleave: this.keepAliveOnHover ? this.handleMouseleave : undefined })) : null
+                this.show ? (h(NMessage, { content: this.content, type: this.type, icon: this.icon, showIcon: this.showIcon, closable: this.closable, onClose: this.handleClose, onMouseenter: this.keepAliveOnHover ? this.handleMouseenter : undefined, onMouseleave: this.keepAliveOnHover ? this.handleMouseleave : undefined })) : null
             ]
         }));
     }