1 line
9.8 KiB
Plaintext
1 line
9.8 KiB
Plaintext
|
{"version":3,"file":"message-method.mjs","sources":["../../../../../../packages/components/message/src/message-method.ts"],"sourcesContent":["import { createVNode, render } from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { isVNode, isNumber } from '@element-plus/utils/util'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { messageConfig } from '@element-plus/components/config-provider/src/config-provider'\nimport MessageConstructor from './message.vue'\nimport { messageTypes } from './message'\n\nimport type { Message, MessageFn, MessageQueue, MessageProps } from './message'\nimport type { ComponentPublicInstance, VNode } from 'vue'\n\nconst instances: MessageQueue = []\nlet seed = 1\n\n// TODO: Since Notify.ts is basically the same like this file. So we could do some encapsulation against them to reduce code duplication.\n\nconst message: MessageFn & Partial<Message> = function (options = {}) {\n if (!isClient) return { close: () => undefined }\n if (isNumber(messageConfig.max) && instances.length >= messageConfig.max) {\n return { close: () => undefined }\n }\n\n if (\n !isVNode(options) &&\n typeof options === 'object' &&\n options.grouping &&\n !isVNode(options.message) &&\n instances.length\n ) {\n const tempVm: any = instances.find(\n (item) =>\n `${item.vm.props?.message ?? ''}` ===\n `${(options as any).message ?? ''}`\n )\n if (tempVm) {\n tempVm.vm.component!.props.repeatNum += 1\n tempVm.vm.component!.props.type = options?.type\n return {\n close: () =>\n ((\n vm.component!.proxy as ComponentPublicInstance<{ visible: boolean }>\n ).visible = false),\n }\n }\n }\n\n if (typeof options === 'string' || isVNode(options)) {\n options = { message: options }\n }\n\n let verticalOffset = options.offset || 20\n instances.forEach(({ vm }) => {\n verticalOffset += (vm.el?.offsetHeight || 0) + 16\n })\n verticalOffset += 16\n\n const id = `message_${seed++}`\n const userOnClose = options.onClose\n const props: Partial<MessageProps> = {\n zIndex: PopupManager.nextZIndex(),\n offset: verticalOffset,\n ...options,\n id,\n onClose: () => {\n close(id, userOnClose)\n },\n }\n\n let appendTo: HTMLElement | null = document.body\n if (options.appendTo instanceof HTMLElement) {\n appendTo = options.appendTo\n } else if (typeof options.appendTo === 'string') {\n appendTo = document.querySelector(options.appendTo)\n }\n // should fallback to default value with a warning\n if (!(appendTo instanceof HTMLElement)) {\n debugWarn(\n 'ElMessage',\n 'the appendTo option is not an HTMLElement. Falling back to document.body.'\n )\n appendTo = document.body\n }\n\n const container = document.createElement('div')\n\n container.className = `container_${id}`\n\n const message = props.message\n const vm = createVNode(\n MessageConstructor,\n props,\n isVNode(props.message) ? { default: () => message } : null\n )\n\n // clean message element preventing mem leak\n vm.props!.onDestroy = () => {\n render(null, container)\n // since the element is destroy, then the VNode should be collected by GC as well\n // we do not want cause any mem leak because we have returned vm as a reference to users\n // so that we manually set it to false.\n }\n\n render(vm, container)\n // instances will remove this item when close function gets called. So we do not need to worry about it.\n instances.push({ vm })\n appendTo.appendChild(container.firstElementChild!)\n\n return {\n // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle\n // for out component, so that all closing steps will not be skipped.\n close: () =>\n ((\n vm.component!.proxy as ComponentPublicInstance<{ visible: boolean }>\n ).visible = false),\n }\n}\n\nmessageTypes.forEach((type) => {\n message[type] = (options =
|