fix(message): message covered by dialog (#701)

- Fix the bug that cause poppup-manager unable to use zIndex from global config

packages/dialog/src/useDialog.ts

@@ -32,7 +32,6 @@ export default function(props: UseDialogProps, ctx: SetupContext) {
         style.width = props.width
       }
     }
-    style.zIndex = String(zIndex.value + 1)
     return style
   })
 

packages/element-plus/index.ts

@@ -84,12 +84,9 @@ import ElTree from '@element-plus/tree'
 import ElUpload from '@element-plus/upload'
 import { use } from '@element-plus/locale'
 import { version } from '../../ep-version'
+import { setConfig } from '@element-plus/utils/config'
 
-interface InstallOptions {
-  size: ComponentSize
-  zIndex: number
-  locale?: any
-}
+import type { InstallOptions } from '@element-plus/utils/config'
 
 const defaultInstallOpt: InstallOptions =  {
   size: '' as ComponentSize,
@@ -187,9 +184,9 @@ const plugins = [
 
 const install = (app: App, opt: InstallOptions): void => {
   const option = Object.assign(defaultInstallOpt, opt)
-
   use(option.locale)
   app.config.globalProperties.$ELEMENT = option
+  setConfig(option)
 
   components.forEach(component => {
     app.component(component.name, component)

packages/message/__tests__/message-manager.spec.ts

@@ -7,7 +7,7 @@ type UnknownProps = Record<string, unknown>
 jest.useFakeTimers()
 
 const selector = '.el-message'
-
+// TODO: testing the original transition with `nextTick`
 const Transition = (_: UnknownProps, { attrs, slots }) =>
   Vue.h('div', attrs, slots)
 Transition.displayName = 'Transition'
@@ -80,4 +80,11 @@ describe('Message on command', () => {
 
     messages.forEach(m => m.close())
   })
+
+  test('it should have 4 other types of message', () => {
+    expect(Message.success).toBeInstanceOf(Function)
+    expect(Message.warning).toBeInstanceOf(Function)
+    expect(Message.info).toBeInstanceOf(Function)
+    expect(Message.error).toBeInstanceOf(Function)
+  })
 })

packages/message/src/message.ts

@@ -1,22 +1,25 @@
 import { createVNode, nextTick, render } from 'vue'
+import { isVNode } from '@element-plus/utils/util'
+import PopupManager from '@element-plus/utils/popup-manager'
+import isServer from '@element-plus/utils/isServer'
+import MessageConstructor from './index.vue'
+
 import type {
   IMessage,
   MessageQueue,
   IMessageOptions,
   MessageVM,
   IMessageHandle,
+  MessageParams,
 } from './types'
 
-import MessageConstructor from './index.vue'
-import { isVNode } from '@element-plus/utils/util'
-import PopupManager from '@element-plus/utils/popup-manager'
-import isServer from '@element-plus/utils/isServer'
-
 let vm: MessageVM
 const instances: MessageQueue = []
 let seed = 1
 
-const Message: IMessage = function (opts = {}): IMessageHandle {
+const Message: IMessage = function(
+  opts: MessageParams = {} as MessageParams,
+): IMessageHandle {
   if (isServer) return
 
   if (typeof opts === 'string') {
@@ -64,7 +67,7 @@ const Message: IMessage = function (opts = {}): IMessageHandle {
   return {
     close: options.onClose,
   }
-}
+} as any
 
 export function close(id: string, userOnClose?: (vm: MessageVM) => void): void {
   const idx = instances.findIndex(({ vm }) => {
@@ -85,7 +88,6 @@ export function close(id: string, userOnClose?: (vm: MessageVM) => void): void {
     document.body.removeChild($el)
   })
 
-
   instances.splice(idx, 1)
 
   // adjust other instances vertical offset
@@ -107,13 +109,15 @@ export function closeAll(): void {
   }
 }
 
-['success', 'warning', 'info', 'error'].forEach(type => {
-  Message[type] = (options = {}) => {
+(['success', 'warning', 'info', 'error'] as const).forEach(type => {
+  Message[type] = options => {
     if (typeof options === 'string') {
       options = {
         message: options,
         type,
       }
+    } else {
+      options.type = type
     }
     return Message(options)
   }

packages/message/src/types.ts

@@ -4,11 +4,6 @@ export interface IMessageHandle {
   close: () => void
 }
 
-export interface IMessage {
-  (options?: IMessageOptions | string) : IMessageHandle
-  closeAll(): void
-}
-
 export type IMessageOptions = {
   customClass?: string
   center?: boolean
@@ -24,6 +19,22 @@ export type IMessageOptions = {
   zIndex?: number
 }
 
+export type MessageType = 'success' | 'warning' | 'info' | 'error' | ''
+
+export type IMessageDispatcher = (options?: IMessageOptions | string) => IMessageHandle
+export type MessageParams = IMessageOptions | string
+export type TypedMessageParams<T extends MessageType> = { type: T; } & Omit<IMessageOptions, 'type'>  | string
+
+export interface IMessage {
+  (options?: MessageParams) : IMessageHandle
+  success: (options?: TypedMessageParams<'success'>) => IMessageHandle
+  warning: (options?: TypedMessageParams<'warning'>) => IMessageHandle
+  info: (options?: TypedMessageParams<'info'>) => IMessageHandle
+  error: (options?: TypedMessageParams<'error'>) => IMessageHandle
+  closeAll(): void
+}
+
+
 export type MessageVM = VNode
 
 type MessageQueueItem = {

packages/utils/config.ts

@@ -1,11 +1,17 @@
 
-const $ELEMENT: Record<string, unknown> = { }
-
-const setConfig = (key: string, value: unknown): void => {
-  $ELEMENT[key] = value
+export interface InstallOptions {
+  size: ComponentSize
+  zIndex: number
+  locale?: any
 }
 
-const getConfig = (key: string): unknown => {
+let $ELEMENT = { } as InstallOptions
+
+const setConfig = (option: InstallOptions): void => {
+  $ELEMENT = option
+}
+
+const getConfig = (key: keyof InstallOptions): unknown => {
   return $ELEMENT[key]
 }
 

packages/utils/popup-manager.ts

@@ -88,7 +88,7 @@ const PopupManager: IPopupManager = {
   },
 
   nextZIndex: function() {
-    return PopupManager.zIndex++
+    return ++PopupManager.zIndex
   },
 
   modalStack: [],