You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

0 lines
10 KiB

3 months ago
  1. {"version":3,"file":"method.mjs","sources":["../../../../../../packages/components/message/src/method.ts"],"sourcesContent":["import { createVNode, isVNode, render } from 'vue'\nimport {\n debugWarn,\n isBoolean,\n isClient,\n isElement,\n isFunction,\n isNumber,\n isString,\n} from '@element-plus/utils'\nimport { messageConfig } from '@element-plus/components/config-provider'\nimport MessageConstructor from './message.vue'\nimport { messageDefaults, messageTypes } from './message'\nimport { instances } from './instance'\n\nimport type { MessageContext } from './instance'\nimport type { AppContext } from 'vue'\nimport type {\n Message,\n MessageFn,\n MessageHandler,\n MessageOptions,\n MessageParams,\n MessageParamsNormalized,\n messageType,\n} from './message'\n\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 normalizeOptions = (params?: MessageParams) => {\n const options: MessageOptions =\n !params || isString(params) || isVNode(params) || isFunction(params)\n ? { message: params }\n : params\n\n const normalized = {\n ...messageDefaults,\n ...options,\n }\n\n if (!normalized.appendTo) {\n normalized.appendTo = document.body\n } else if (isString(normalized.appendTo)) {\n let appendTo = document.querySelector<HTMLElement>(normalized.appendTo)\n\n // should fallback to default value with a warning\n if (!isElement(appendTo)) {\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 normalized.appendTo = appendTo\n }\n\n // When grouping is configured globally,\n // if grouping is manually set when calling message individually and it is not equal to the default value,\n // the global configuration cannot override the current setting. default => false\n if (isBoolean(messageConfig.grouping) && !normalized.grouping) {\n normalized.grouping = messageConfig.grouping\n }\n if (isNumber(messageConfig.duration) && normalized.duration === 3000) {\n normalized.duration = messageConfig.duration\n }\n if (isNumber(messageConfig.offset) && normalized.offset === 16) {\n normalized.offset = messageConfig.offset\n }\n if (isBoolean(messageConfig.showClose) && !normalized.showClose) {\n normalized.showClose = messageConfig.showClose\n }\n\n return normalized as MessageParamsNormalized\n}\n\nconst closeMessage = (instance: MessageContext) => {\n const idx = instances.indexOf(instance)\n if (idx === -1) return\n\n instances.splice(idx, 1)\n const { handler } = instance\n handler.close()\n}\n\nconst createMessage = (\n { appendTo, ...options }: MessageParamsNormalized,\n context?: AppContext | null\n): MessageContext => {\n const id = `message_${seed++}`\n const userOnClose = options.onClose\n\n const container = document.createElement('div')\n\n const props = {\n ...options,\n // now the zIndex will be used inside the message.vue component instead of here.\n // zIndex: nextIndex() + options.zIndex\n id,\n onClose: () => {\n userOnClose?.()\n closeMessage(instance)\n },\n\n // clean message element preventing mem leak\n onDestroy: () => {\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 render(null, container)\n },\n }\n const vnode = createVNode(\n MessageConstructor,\n props,\n isFunction(props.message) || isVNode(props.message)\n ? {\n default: isFunction(props.message)\n ? props.message\n : () => props.message,\n }\n : null\n )\n vnode.appContext = context || message._context\n\n render(vnode, container)\n // instances will remove this item when close function gets called. So we do not need to worry about it.\n appendTo.appendCh