- {showIcon ? (
+ {(iconNode = createIconVNode(icon, type, mergedClsPrefix)) &&
+ showIcon ? (
{{
- default: () => [
- createIconVNode(icon, type, mergedClsPrefix)
- ]
+ default: () => iconNode
}}
- ) : null}
+ ) : null}
{render(content)}
@@ -201,19 +202,17 @@ function createIconVNode (
if (typeof icon === 'function') {
return icon()
} else {
+ const innerIcon =
+ type === 'loading' ? (
+
+ ) : (
+ iconMap[type]
+ )
+ if (!innerIcon) return null
return (
{{
- default: () =>
- type === 'loading' ? (
-
- ) : (
- iconMap[type]
- )
+ default: () => innerIcon
}}
)
diff --git a/src/message/src/MessageProvider.tsx b/src/message/src/MessageProvider.tsx
index e3bb17b263c..346eac5daec 100644
--- a/src/message/src/MessageProvider.tsx
+++ b/src/message/src/MessageProvider.tsx
@@ -24,6 +24,7 @@ import { messageApiInjectionKey, messageProviderInjectionKey } from './context'
type ContentType = string | (() => VNodeChild)
export interface MessageApiInjection {
+ create: (content: ContentType, options?: MessageOptions) => MessageReactive
info: (content: ContentType, options?: MessageOptions) => MessageReactive
success: (content: ContentType, options?: MessageOptions) => MessageReactive
warning: (content: ContentType, options?: MessageOptions) => MessageReactive
@@ -95,6 +96,9 @@ export default defineComponent({
const messageListRef = ref
([])
const messageRefs = ref<{ [key: string]: PrivateMessageRef }>({})
const api: MessageApiInjection = {
+ create (content: ContentType, options?: MessageOptions) {
+ return create(content, { type: 'default', ...options })
+ },
info (content: ContentType, options?: MessageOptions) {
return create(content, { ...options, type: 'info' })
},
diff --git a/src/message/src/styles/index.cssr.ts b/src/message/src/styles/index.cssr.ts
index 9c4ba3786f2..75b7d6801aa 100644
--- a/src/message/src/styles/index.cssr.ts
+++ b/src/message/src/styles/index.cssr.ts
@@ -15,6 +15,7 @@ import fadeInHeightExpand from '../../../_styles/transitions/fade-in-height-expa
// --n-text-color
// --n-color
// --n-box-shadow
+// --n-icon-color-default
// --n-icon-color-info
// --n-icon-color-success
// --n-icon-color-warning
@@ -75,7 +76,7 @@ export default c([
font-size: var(--n-icon-size);
flex-shrink: 0;
`, [
- ['info', 'success', 'warning', 'error', 'loading'].map((type) =>
+ ['default', 'info', 'success', 'warning', 'error', 'loading'].map((type) =>
cM(`${type}-type`, [
c('> *', `
color: var(--n-icon-color-${type});
diff --git a/src/message/src/types.ts b/src/message/src/types.ts
index fde4ec48286..517e3dde90e 100644
--- a/src/message/src/types.ts
+++ b/src/message/src/types.ts
@@ -1,7 +1,13 @@
import { VNodeChild } from 'vue'
import type { MessageSetupProps } from './message-props'
-export type MessageType = 'info' | 'success' | 'warning' | 'error' | 'loading'
+export type MessageType =
+ | 'info'
+ | 'success'
+ | 'warning'
+ | 'error'
+ | 'loading'
+ | 'default'
// We should export keepAliveOnHover since it's not managed by users
export type RenderMessageProps = Pick<
diff --git a/src/message/styles/light.ts b/src/message/styles/light.ts
index af9f7e566d4..25850de6994 100644
--- a/src/message/styles/light.ts
+++ b/src/message/styles/light.ts
@@ -21,26 +21,33 @@ export const self = (vars: ThemeCommonVars) => {
} = vars
return {
...commonVariables,
+ textColor: textColor2,
textColorInfo: textColor2,
textColorSuccess: textColor2,
textColorError: textColor2,
textColorWarning: textColor2,
textColorLoading: textColor2,
+ color: popoverColor,
colorInfo: popoverColor,
colorSuccess: popoverColor,
colorError: popoverColor,
colorWarning: popoverColor,
colorLoading: popoverColor,
+ boxShadow: boxShadow2,
boxShadowInfo: boxShadow2,
boxShadowSuccess: boxShadow2,
boxShadowError: boxShadow2,
boxShadowWarning: boxShadow2,
boxShadowLoading: boxShadow2,
+ iconColor: textColor2,
iconColorInfo: infoColor,
iconColorSuccess: successColor,
iconColorWarning: warningColor,
iconColorError: errorColor,
iconColorLoading: primaryColor,
+ closeColor: closeColor,
+ closeColorHover: closeColorHover,
+ closeColorPressed: closeColorPressed,
closeColorInfo: closeColor,
closeColorHoverInfo: closeColorHover,
closeColorPressedInfo: closeColorPressed,