naive-ui 2.22.0 → 2.24.0

package/lib/menu/src/styles/index.cssr.js

@@ -13,37 +13,37 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const fade_in_height_expand_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-height-expand.cssr")); // vars:
-// --color
-// --group-text-color
-// --bezier
-// --font-size
-// --border-color-horizontal
-// --border-radius
-// --item-color-active
-// --item-color-active-collapsed
-// --arrow-color
-// --arrow-color-hover
-// --arrow-color-active
-// --arrow-color-child-active
-// --item-text-color
-// --item-text-color-hover
-// --item-text-color-active
-// --item-text-color-child-active
-// --item-icon-color
-// --item-icon-color-hover
-// --item-icon-color-active
-// --item-icon-color-collapsed
-// --item-icon-color-child-active
-// --item-height
+// --n-color
+// --n-group-text-color
+// --n-bezier
+// --n-font-size
+// --n-border-color-horizontal
+// --n-border-radius
+// --n-item-color-active
+// --n-item-color-active-collapsed
+// --n-arrow-color
+// --n-arrow-color-hover
+// --n-arrow-color-active
+// --n-arrow-color-child-active
+// --n-item-text-color
+// --n-item-text-color-hover
+// --n-item-text-color-active
+// --n-item-text-color-child-active
+// --n-item-icon-color
+// --n-item-icon-color-hover
+// --n-item-icon-color-active
+// --n-item-icon-color-collapsed
+// --n-item-icon-color-child-active
+// --n-item-height
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
- background-color: var(--color);
- color: var(--item-text-color);
+ background-color: var(--n-color);
+ color: var(--n-item-text-color);
  overflow: hidden;
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  box-sizing: border-box;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  padding-bottom: 6px;
  `, [(0, cssr_1.cM)('horizontal', {
   display: 'inline-flex',
@@ -55,25 +55,25 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
 }, [(0, cssr_1.c)('&::before', {
   backgroundColor: '#0000 !important'
 }), (0, cssr_1.cM)('selected', [(0, cssr_1.cB)('menu-item-content', {
-  borderBottom: '2px solid var(--border-color-horizontal)'
+  borderBottom: '2px solid var(--n-border-color-horizontal)'
 })])]), (0, cssr_1.cB)('menu-item-content', {
   padding: '0 20px',
   borderBottom: '2px solid #0000'
 }, [(0, cssr_1.cM)('child-active', {
-  borderBottom: '2px solid var(--border-color-horizontal)'
+  borderBottom: '2px solid var(--n-border-color-horizontal)'
 }), (0, cssr_1.cNotM)('disabled', [hoverStyle({
-  borderBottom: '2px solid var(--border-color-horizontal)'
+  borderBottom: '2px solid var(--n-border-color-horizontal)'
 }, null)])])]), (0, cssr_1.cM)('collapsed', [(0, cssr_1.cB)('menu-item', [(0, cssr_1.cM)('selected', [(0, cssr_1.c)('&::before', {
-  backgroundColor: 'var(--item-color-active-collapsed) !important'
+  backgroundColor: 'var(--n-item-color-active-collapsed) !important'
 })])]), (0, cssr_1.cB)('menu-item-content', [(0, cssr_1.cB)('menu-item-content-header', {
   opacity: 0
 }), (0, cssr_1.cE)('arrow', {
   opacity: 0
 }), (0, cssr_1.cE)('icon', {
-  color: 'var(--item-icon-color-collapsed)'
+  color: 'var(--n-item-icon-color-collapsed)'
 })])]), (0, cssr_1.cB)('menu-item', `
- transition: background-color .3s var(--bezier);
- height: var(--item-height);
+ transition: background-color .3s var(--n-bezier);
+ height: var(--n-item-height);
  margin-top: 6px;
  position: relative;
  `, [(0, cssr_1.c)('&::before', `
@@ -86,20 +86,20 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
  top: 0;
  bottom: 0;
  pointer-events: none;
- border-radius: var(--border-radius);
- transition: background-color .3s var(--bezier);
+ border-radius: var(--n-border-radius);
+ transition: background-color .3s var(--n-bezier);
  `), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:active::before', {
-  backgroundColor: 'var(--item-color-active)'
+  backgroundColor: 'var(--n-item-color-active)'
 })]), (0, cssr_1.cM)('selected', [(0, cssr_1.c)('&::before', {
-  backgroundColor: 'var(--item-color-active)'
+  backgroundColor: 'var(--n-item-color-active)'
 }), (0, cssr_1.cB)('menu-item-content', [(0, cssr_1.cE)('arrow', {
-  color: 'var(--arrow-color-active)'
+  color: 'var(--n-arrow-color-active)'
 }), (0, cssr_1.cE)('icon', {
-  color: 'var(--item-icon-color-active)'
+  color: 'var(--n-item-icon-color-active)'
 }), (0, cssr_1.cB)('menu-item-content-header', {
-  color: 'var(--item-text-color-active)'
+  color: 'var(--n-item-text-color-active)'
 }, [(0, cssr_1.cE)('extra', {
-  color: 'var(--item-text-color-active)'
+  color: 'var(--n-item-text-color-active)'
 })])])])]), (0, cssr_1.cB)('menu-item-content', `
  box-sizing: border-box;
  line-height: 1.75;
@@ -113,37 +113,37 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
  z-index: auto;
  padding-right: 18px;
  transition:
- background-color .3s var(--bezier),
- padding-left .3s var(--bezier),
- border-color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ padding-left .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  `, [(0, cssr_1.cM)('disabled', {
   opacity: '.45',
   cursor: 'not-allowed'
 }), (0, cssr_1.cM)('collapsed', [(0, cssr_1.cE)('arrow', {
   transform: 'rotate(0)'
 })]), (0, cssr_1.cM)('child-active', [(0, cssr_1.cB)('menu-item-content-header', {
-  color: 'var(--item-text-color-child-active)'
+  color: 'var(--n-item-text-color-child-active)'
 }, [(0, cssr_1.cE)('extra', {
-  color: 'var(--item-text-color-child-active)'
+  color: 'var(--n-item-text-color-child-active)'
 })]), (0, cssr_1.cE)('arrow', {
-  color: 'var(--arrow-color-child-active)'
+  color: 'var(--n-arrow-color-child-active)'
 }), (0, cssr_1.cE)('icon', {
-  color: 'var(--item-icon-color-child-active)'
+  color: 'var(--n-item-icon-color-child-active)'
 })]), (0, cssr_1.cNotM)('disabled', [hoverStyle(null, [(0, cssr_1.cE)('arrow', {
-  color: 'var(--arrow-color-hover)'
+  color: 'var(--n-arrow-color-hover)'
 }), (0, cssr_1.cE)('icon', {
-  color: 'var(--item-icon-color-hover)'
+  color: 'var(--n-item-icon-color-hover)'
 }), (0, cssr_1.cB)('menu-item-content-header', {
-  color: 'var(--item-text-color-hover)'
+  color: 'var(--n-item-text-color-hover)'
 }, [(0, cssr_1.cE)('extra', {
-  color: 'var(--item-text-color-hover)'
+  color: 'var(--n-item-text-color-hover)'
 })])])]), (0, cssr_1.cE)('icon', `
  grid-area: icon;
- color: var(--item-icon-color);
+ color: var(--n-item-icon-color);
  transition:
- color .3s var(--bezier),
- font-size .3s var(--bezier),
- margin-right .3s var(--bezier);
+ color .3s var(--n-bezier),
+ font-size .3s var(--n-bezier),
+ margin-right .3s var(--n-bezier);
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
@@ -151,23 +151,23 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
  `), (0, cssr_1.cE)('arrow', `
  grid-area: arrow;
  font-size: 16px;
- color: var(--arrow-color);
+ color: var(--n-arrow-color);
  transform: rotate(180deg);
  opacity: 1;
  transition:
- color .3s var(--bezier),
- transform 0.2s var(--bezier),
- opacity 0.2s var(--bezier);
+ color .3s var(--n-bezier),
+ transform 0.2s var(--n-bezier),
+ opacity 0.2s var(--n-bezier);
  `), (0, cssr_1.cB)('menu-item-content-header', `
  grid-area: content;
  transition:
- color .3s var(--bezier),
- opacity .3s var(--bezier);
+ color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier);
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
- color: var(--item-text-color);
+ color: var(--n-item-text-color);
  `, [(0, cssr_1.c)('a', `
  text-decoration: none;
  color: inherit;
@@ -180,14 +180,14 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
  bottom: 0;
  `)]), (0, cssr_1.cE)('extra', `
  font-size: .93em;
- color: var(--group-text-color);
- transition: color .3s var(--bezier);
+ color: var(--n-group-text-color);
+ transition: color .3s var(--n-bezier);
  `)])]), (0, cssr_1.cB)('submenu', {
   cursor: 'pointer',
   position: 'relative',
   marginTop: '6px'
 }, [(0, cssr_1.cB)('menu-item-content', `
- height: var(--item-height);
+ height: var(--n-item-height);
  `), (0, cssr_1.cB)('submenu-children', {
   overflow: 'hidden',
   padding: 0
@@ -195,21 +195,21 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
   duration: '.2s'
 })])]), (0, cssr_1.cB)('menu-item-group', [(0, cssr_1.cB)('menu-item-group-title', `
  margin-top: 6px;
- color: var(--group-text-color);
+ color: var(--n-group-text-color);
  cursor: default;
  font-size: .93em;
  height: 36px;
  display: flex;
  align-items: center;
  transition:
- padding-left .3s var(--bezier),
- color .3s var(--bezier);
+ padding-left .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  `)])]), (0, cssr_1.cB)('menu-tooltip', [(0, cssr_1.c)('a', `
  color: inherit;
  text-decoration: none;
  `)]), (0, cssr_1.cB)('menu-divider', `
- transition: background-color .3s var(--bezier);
- background-color: var(--divider-color);
+ transition: background-color .3s var(--n-bezier);
+ background-color: var(--n-divider-color);
  height: 1px;
  margin: 6px 18px;
  `)]);

package/lib/message/index.d.ts

@@ -1,3 +1,4 @@
 export { default as NMessageProvider } from './src/MessageProvider';
 export { useMessage } from './src/use-message';
-export type { MessageApiInjection as MessageApi, MessageProviderInst, MessageProviderProps, MessageOptions, MessageReactive } from './src/MessageProvider';
+export type { MessageApiInjection as MessageApi, MessageProviderInst, MessageProviderProps, MessageReactive } from './src/MessageProvider';
+export type { MessageOptions, MessageRenderMessage, MessageType } from './src/types';

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

@@ -1,60 +1,232 @@
-import { VNodeChild } from 'vue';
-import { MessageType } from './message-props';
+import { VNodeChild, CSSProperties, PropType } from 'vue';
+import type { MessageType } from './types';
+import { MessageRenderMessage } from '..';
 declare const _default: import("vue").DefineComponent<{
-    readonly icon: import("vue").PropType<() => VNodeChild>;
-    readonly type: {
-        readonly type: import("vue").PropType<MessageType>;
+    render: PropType<MessageRenderMessage>;
+    icon: PropType<() => VNodeChild>;
+    type: {
+        readonly type: PropType<MessageType>;
         readonly default: "info";
     };
-    readonly content: import("vue").PropType<string | number | (() => VNodeChild)>;
-    readonly closable: BooleanConstructor;
-    readonly keepAliveOnHover: BooleanConstructor;
-    readonly onClose: import("vue").PropType<() => void>;
-    readonly onMouseenter: import("vue").PropType<(e: MouseEvent) => void>;
-    readonly onMouseleave: import("vue").PropType<(e: MouseEvent) => void>;
+    content: PropType<string | number | (() => VNodeChild)>;
+    closable: BooleanConstructor;
+    keepAliveOnHover: BooleanConstructor;
+    onClose: PropType<() => void>;
+    onMouseenter: PropType<(e: MouseEvent) => void>;
+    onMouseleave: PropType<(e: MouseEvent) => void>;
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
+    messageProviderProps: {
+        to?: unknown;
+        duration?: unknown;
+        keepAliveOnHover?: unknown;
+        max?: unknown;
+        placement?: unknown;
+        closable?: unknown;
+        containerStyle?: unknown;
+        theme?: unknown;
+        themeOverrides?: unknown;
+        builtinThemeOverrides?: unknown;
+    } & {
+        duration: number;
+        placement: "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+        closable: boolean;
+        keepAliveOnHover: boolean;
+    } & {
+        max?: number | undefined;
+        to?: string | HTMLElement | undefined;
+        theme?: import("../../_mixins").Theme<"Message", {
+            textColorInfo: string;
+            textColorSuccess: string;
+            textColorError: string;
+            textColorWarning: string;
+            textColorLoading: string;
+            colorInfo: string;
+            colorSuccess: string;
+            colorError: string;
+            colorWarning: string;
+            colorLoading: string;
+            boxShadowInfo: string;
+            boxShadowSuccess: string;
+            boxShadowError: string;
+            boxShadowWarning: string;
+            boxShadowLoading: string;
+            iconColorInfo: string;
+            iconColorSuccess: string;
+            iconColorWarning: string;
+            iconColorError: string;
+            iconColorLoading: string;
+            closeColorInfo: string;
+            closeColorHoverInfo: string;
+            closeColorPressedInfo: string;
+            closeColorSuccess: string;
+            closeColorHoverSuccess: string;
+            closeColorPressedSuccess: string;
+            closeColorError: string;
+            closeColorHoverError: string;
+            closeColorPressedError: string;
+            closeColorWarning: string;
+            closeColorHoverWarning: string;
+            closeColorPressedWarning: string;
+            closeColorLoading: string;
+            closeColorHoverLoading: string;
+            closeColorPressedLoading: string;
+            loadingColor: string;
+            lineHeight: string;
+            borderRadius: string;
+            margin: string;
+            padding: string;
+            maxWidth: string;
+            minWidth: string;
+            iconMargin: string;
+            closeMargin: string;
+            closeSize: string;
+            iconSize: string;
+            fontSize: string;
+        }, any> | undefined;
+        themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Message", {
+            textColorInfo: string;
+            textColorSuccess: string;
+            textColorError: string;
+            textColorWarning: string;
+            textColorLoading: string;
+            colorInfo: string;
+            colorSuccess: string;
+            colorError: string;
+            colorWarning: string;
+            colorLoading: string;
+            boxShadowInfo: string;
+            boxShadowSuccess: string;
+            boxShadowError: string;
+            boxShadowWarning: string;
+            boxShadowLoading: string;
+            iconColorInfo: string;
+            iconColorSuccess: string;
+            iconColorWarning: string;
+            iconColorError: string;
+            iconColorLoading: string;
+            closeColorInfo: string;
+            closeColorHoverInfo: string;
+            closeColorPressedInfo: string;
+            closeColorSuccess: string;
+            closeColorHoverSuccess: string;
+            closeColorPressedSuccess: string;
+            closeColorError: string;
+            closeColorHoverError: string;
+            closeColorPressedError: string;
+            closeColorWarning: string;
+            closeColorHoverWarning: string;
+            closeColorPressedWarning: string;
+            closeColorLoading: string;
+            closeColorHoverLoading: string;
+            closeColorPressedLoading: string;
+            loadingColor: string;
+            lineHeight: string;
+            borderRadius: string;
+            margin: string;
+            padding: string;
+            maxWidth: string;
+            minWidth: string;
+            iconMargin: string;
+            closeMargin: string;
+            closeSize: string;
+            iconSize: string;
+            fontSize: string;
+        }, any>> | undefined;
+        builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Message", {
+            textColorInfo: string;
+            textColorSuccess: string;
+            textColorError: string;
+            textColorWarning: string;
+            textColorLoading: string;
+            colorInfo: string;
+            colorSuccess: string;
+            colorError: string;
+            colorWarning: string;
+            colorLoading: string;
+            boxShadowInfo: string;
+            boxShadowSuccess: string;
+            boxShadowError: string;
+            boxShadowWarning: string;
+            boxShadowLoading: string;
+            iconColorInfo: string;
+            iconColorSuccess: string;
+            iconColorWarning: string;
+            iconColorError: string;
+            iconColorLoading: string;
+            closeColorInfo: string;
+            closeColorHoverInfo: string;
+            closeColorPressedInfo: string;
+            closeColorSuccess: string;
+            closeColorHoverSuccess: string;
+            closeColorPressedSuccess: string;
+            closeColorError: string;
+            closeColorHoverError: string;
+            closeColorPressedError: string;
+            closeColorWarning: string;
+            closeColorHoverWarning: string;
+            closeColorPressedWarning: string;
+            closeColorLoading: string;
+            closeColorHoverLoading: string;
+            closeColorPressedLoading: string;
+            loadingColor: string;
+            lineHeight: string;
+            borderRadius: string;
+            margin: string;
+            padding: string;
+            maxWidth: string;
+            minWidth: string;
+            iconMargin: string;
+            closeMargin: string;
+            closeSize: string;
+            iconSize: string;
+            fontSize: string;
+        }, any>> | undefined;
+        containerStyle?: string | CSSProperties | undefined;
+    };
     handleClose(): void;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--margin': string;
-        '--padding': string;
-        '--max-width': string;
-        '--font-size': string;
-        '--icon-margin': string;
-        '--icon-size': string;
-        '--close-size': string;
-        '--close-margin': string;
-        '--text-color': string;
-        '--color': string;
-        '--box-shadow': string;
-        '--icon-color-info': string;
-        '--icon-color-success': string;
-        '--icon-color-warning': string;
-        '--icon-color-error': string;
-        '--icon-color-loading': string;
-        '--close-color': string;
-        '--close-color-pressed': string;
-        '--close-color-hover': string;
-        '--line-height': string;
-        '--border-radius': string;
+        '--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;
     }>;
     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<{
-    readonly icon?: unknown;
-    readonly type?: unknown;
-    readonly content?: unknown;
-    readonly closable?: unknown;
-    readonly keepAliveOnHover?: unknown;
-    readonly onClose?: unknown;
-    readonly onMouseenter?: unknown;
-    readonly onMouseleave?: unknown;
+    render?: unknown;
+    icon?: unknown;
+    type?: unknown;
+    content?: unknown;
+    closable?: unknown;
+    keepAliveOnHover?: unknown;
+    onClose?: unknown;
+    onMouseenter?: unknown;
+    onMouseleave?: unknown;
 } & {
     type: MessageType;
     closable: boolean;
     keepAliveOnHover: boolean;
 } & {
     content?: string | number | (() => VNodeChild) | undefined;
+    render?: MessageRenderMessage | undefined;
     icon?: (() => VNodeChild) | undefined;
     onMouseenter?: ((e: MouseEvent) => void) | undefined;
     onMouseleave?: ((e: MouseEvent) => void) | undefined;

package/lib/message/src/Message.js

@@ -20,7 +20,7 @@ const iconMap = {
 };
 exports.default = (0, vue_1.defineComponent)({
     name: 'Message',
-    props: message_props_1.messageProps,
+    props: Object.assign(Object.assign({}, message_props_1.messageProps), { render: Function }),
     setup(props) {
         const { props: messageProviderProps, mergedClsPrefixRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -28,6 +28,7 @@ exports.default = (0, vue_1.defineComponent)({
         const themeRef = (0, _mixins_1.useTheme)('Message', 'Message', index_cssr_1.default, styles_1.messageLight, messageProviderProps, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
+            messageProviderProps,
             handleClose() {
                 var _a;
                 (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
@@ -36,45 +37,46 @@ exports.default = (0, vue_1.defineComponent)({
                 const { type } = props;
                 const { common: { cubicBezierEaseInOut }, self: { padding, margin, maxWidth, iconMargin, closeMargin, closeSize, iconSize, fontSize, lineHeight, borderRadius, iconColorInfo, iconColorSuccess, iconColorWarning, iconColorError, iconColorLoading, [(0, _utils_1.createKey)('textColor', type)]: textColor, [(0, _utils_1.createKey)('boxShadow', type)]: boxShadow, [(0, _utils_1.createKey)('color', type)]: color, [(0, _utils_1.createKey)('closeColor', type)]: closeColor, [(0, _utils_1.createKey)('closeColorPressed', type)]: closeColorPressed, [(0, _utils_1.createKey)('closeColorHover', type)]: closeColorHover } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--margin': margin,
-                    '--padding': padding,
-                    '--max-width': maxWidth,
-                    '--font-size': fontSize,
-                    '--icon-margin': iconMargin,
-                    '--icon-size': iconSize,
-                    '--close-size': closeSize,
-                    '--close-margin': closeMargin,
-                    '--text-color': textColor,
-                    '--color': color,
-                    '--box-shadow': boxShadow,
-                    '--icon-color-info': iconColorInfo,
-                    '--icon-color-success': iconColorSuccess,
-                    '--icon-color-warning': iconColorWarning,
-                    '--icon-color-error': iconColorError,
-                    '--icon-color-loading': iconColorLoading,
-                    '--close-color': closeColor,
-                    '--close-color-pressed': closeColorPressed,
-                    '--close-color-hover': closeColorHover,
-                    '--line-height': lineHeight,
-                    '--border-radius': borderRadius
+                    '--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
                 };
             }),
             placement: messageProviderProps.placement
         };
     },
     render() {
-        const { icon, type, closable, content, mergedClsPrefix, cssVars, handleClose } = this;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-message-wrapper`, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave, style: Object.assign(Object.assign({}, cssVars), { alignItems: this.placement.startsWith('top')
+        const { render: renderMessage, type, closable, content, mergedClsPrefix, cssVars, icon, handleClose } = this;
+        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-message-wrapper`, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave, style: Object.assign({
+                alignItems: this.placement.startsWith('top')
                     ? 'flex-start'
-                    : 'flex-end' }) },
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-message ${mergedClsPrefix}-message--${type}-type` },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-message__icon ${mergedClsPrefix}-message__icon--${type}-type` },
-                    (0, vue_1.h)(_internal_1.NIconSwitchTransition, null, {
-                        default: () => [createIconVNode(icon, type, mergedClsPrefix)]
-                    })),
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-message__content` }, (0, _utils_1.render)(content)),
-                closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-message__close`, onClick: handleClose })) : null)));
+                    : 'flex-end'
+            }, cssVars) }, renderMessage ? (renderMessage(this.$props)) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-message ${mergedClsPrefix}-message--${type}-type` },
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-message__icon ${mergedClsPrefix}-message__icon--${type}-type` },
+                (0, vue_1.h)(_internal_1.NIconSwitchTransition, null, {
+                    default: () => [createIconVNode(icon, type, mergedClsPrefix)]
+                })),
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-message__content` }, (0, _utils_1.render)(content)),
+            closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-message__close`, onClick: handleClose })) : null))));
     }
 });
 function createIconVNode(icon, type, clsPrefix) {

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

@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     onAfterHide: FunctionConstructor;
     icon: PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: PropType<import("./message-props").MessageType>;
+        readonly type: PropType<import("./types").MessageType>;
         readonly default: "info";
     };
     content: PropType<string | number | (() => import("vue").VNodeChild)>;
@@ -49,7 +49,7 @@ declare const _default: import("vue").DefineComponent<{
     onMouseenter?: unknown;
     onMouseleave?: unknown;
 } & {
-    type: import("./message-props").MessageType;
+    type: import("./types").MessageType;
     duration: number;
     closable: boolean;
     internalKey: string;
@@ -66,7 +66,7 @@ declare const _default: import("vue").DefineComponent<{
     onAfterHide?: Function | undefined;
     onInternalAfterLeave?: ((key: string) => void) | undefined;
 }>, {
-    type: import("./message-props").MessageType;
+    type: import("./types").MessageType;
     duration: number;
     closable: boolean;
     keepAliveOnHover: boolean;