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
11 KiB

1 month ago
  1. {"version":3,"file":"messageBox.mjs","sources":["../../../../../../packages/components/message-box/src/messageBox.ts"],"sourcesContent":["import { createVNode, isVNode, markRaw, render } from 'vue'\nimport {\n debugWarn,\n hasOwn,\n isClient,\n isElement,\n isFunction,\n isObject,\n isString,\n isUndefined,\n} from '@element-plus/utils'\nimport MessageBoxConstructor from './index.vue'\n\nimport type { AppContext, ComponentPublicInstance, VNode } from 'vue'\nimport type {\n Action,\n Callback,\n ElMessageBoxOptions,\n ElMessageBoxShortcutMethod,\n IElMessageBox,\n MessageBoxData,\n MessageBoxState,\n} from './message-box.type'\n\n// component default merge props & data\n\nconst messageInstance = new Map<\n ComponentPublicInstance<{ doClose: () => void }>, // marking doClose as function\n {\n options: any\n callback: Callback | undefined\n resolve: (res: any) => void\n reject: (reason?: any) => void\n }\n>()\n\nconst getAppendToElement = (props: any): HTMLElement => {\n let appendTo: HTMLElement | null = document.body\n if (props.appendTo) {\n if (isString(props.appendTo)) {\n appendTo = document.querySelector<HTMLElement>(props.appendTo)\n }\n if (isElement(props.appendTo)) {\n appendTo = props.appendTo\n }\n\n // should fallback to default value with a warning\n if (!isElement(appendTo)) {\n debugWarn(\n 'ElMessageBox',\n 'the appendTo option is not an HTMLElement. Falling back to document.body.'\n )\n appendTo = document.body\n }\n }\n return appendTo\n}\n\nconst initInstance = (\n props: any,\n container: HTMLElement,\n appContext: AppContext | null = null\n) => {\n const vnode = createVNode(\n MessageBoxConstructor,\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 = appContext\n render(vnode, container)\n getAppendToElement(props).appendChild(container.firstElementChild!)\n return vnode.component\n}\n\nconst genContainer = () => {\n return document.createElement('div')\n}\n\nconst showMessage = (options: any, appContext?: AppContext | null) => {\n const container = genContainer()\n // Adding destruct method.\n // when transition leaves emitting `vanish` evt. so that we can do the clean job.\n options.onVanish = () => {\n // not sure if this causes mem leak, need proof to verify that.\n // maybe calling out like 1000 msg-box then close them all.\n render(null, container)\n messageInstance.delete(vm) // Remove vm to avoid mem leak.\n // here we were suppose to call document.body.removeChild(container.firstElementChild)\n // but render(null, container) did that job for us. so that we do not call that directly\n }\n\n options.onAction = (action: Action) => {\n const currentMsg = messageInstance.get(vm)!\n let resolve: Action | { value: string; action: Action }\n if (options.showInput) {\n resolve = { value: vm.inputValue, action }\n } else {\n resolve = action\n }\n if (options.callback) {\n options.callback(resolve, instance.proxy)\n } else {\n if (action === 'cancel' || action === 'close') {\n if (options.distinguishCancelAndClose && action !== 'cancel') {\n currentMsg.reject('close')\n } else {\n currentMsg.reject('cancel')\n }\n } else {\n currentMsg.resolve(resolve)\n }\n }\n }\n\n const instance = initInstance(options, container, appContext)!\n\n // This is how we use message box programmatically.\n // Maybe consider releasing a template version?\n // get component instance like v2.\n const vm = instance.proxy as ComponentPublicInstance<\n {\n visible: boolean\n doClose: () => void\n } & MessageBoxState\n >\n\n for (const prop in options) {\n if (hasOwn(options, prop) && !hasOwn(vm.$props, prop)) {\n if (prop === 'closeIcon' && isObject(options[prop])) {\n vm[prop