messageBox.mjs 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. import { isVNode, render, markRaw, createVNode } from 'vue';
  2. import MessageBoxConstructor from './index.mjs';
  3. import { isClient } from '@vueuse/core';
  4. import { isString, isObject, hasOwn, isFunction } from '@vue/shared';
  5. import { isUndefined, isElement } from '../../../utils/types.mjs';
  6. import { debugWarn } from '../../../utils/error.mjs';
  7. const messageInstance = /* @__PURE__ */ new Map();
  8. const getAppendToElement = (props) => {
  9. let appendTo = document.body;
  10. if (props.appendTo) {
  11. if (isString(props.appendTo)) {
  12. appendTo = document.querySelector(props.appendTo);
  13. }
  14. if (isElement(props.appendTo)) {
  15. appendTo = props.appendTo;
  16. }
  17. if (!isElement(appendTo)) {
  18. debugWarn(
  19. "ElMessageBox",
  20. "the appendTo option is not an HTMLElement. Falling back to document.body."
  21. );
  22. appendTo = document.body;
  23. }
  24. }
  25. return appendTo;
  26. };
  27. const initInstance = (props, container, appContext = null) => {
  28. const vnode = createVNode(
  29. MessageBoxConstructor,
  30. props,
  31. isFunction(props.message) || isVNode(props.message) ? {
  32. default: isFunction(props.message) ? props.message : () => props.message
  33. } : null
  34. );
  35. vnode.appContext = appContext;
  36. render(vnode, container);
  37. getAppendToElement(props).appendChild(container.firstElementChild);
  38. return vnode.component;
  39. };
  40. const genContainer = () => {
  41. return document.createElement("div");
  42. };
  43. const showMessage = (options, appContext) => {
  44. const container = genContainer();
  45. options.onVanish = () => {
  46. render(null, container);
  47. messageInstance.delete(vm);
  48. };
  49. options.onAction = (action) => {
  50. const currentMsg = messageInstance.get(vm);
  51. let resolve;
  52. if (options.showInput) {
  53. resolve = { value: vm.inputValue, action };
  54. } else {
  55. resolve = action;
  56. }
  57. if (options.callback) {
  58. options.callback(resolve, instance.proxy);
  59. } else {
  60. if (action === "cancel" || action === "close") {
  61. if (options.distinguishCancelAndClose && action !== "cancel") {
  62. currentMsg.reject("close");
  63. } else {
  64. currentMsg.reject("cancel");
  65. }
  66. } else {
  67. currentMsg.resolve(resolve);
  68. }
  69. }
  70. };
  71. const instance = initInstance(options, container, appContext);
  72. const vm = instance.proxy;
  73. for (const prop in options) {
  74. if (hasOwn(options, prop) && !hasOwn(vm.$props, prop)) {
  75. if (prop === "closeIcon" && isObject(options[prop])) {
  76. vm[prop] = markRaw(options[prop]);
  77. } else {
  78. vm[prop] = options[prop];
  79. }
  80. }
  81. }
  82. vm.visible = true;
  83. return vm;
  84. };
  85. function MessageBox(options, appContext = null) {
  86. if (!isClient)
  87. return Promise.reject();
  88. let callback;
  89. if (isString(options) || isVNode(options)) {
  90. options = {
  91. message: options
  92. };
  93. } else {
  94. callback = options.callback;
  95. }
  96. return new Promise((resolve, reject) => {
  97. const vm = showMessage(
  98. options,
  99. appContext != null ? appContext : MessageBox._context
  100. );
  101. messageInstance.set(vm, {
  102. options,
  103. callback,
  104. resolve,
  105. reject
  106. });
  107. });
  108. }
  109. const MESSAGE_BOX_VARIANTS = ["alert", "confirm", "prompt"];
  110. const MESSAGE_BOX_DEFAULT_OPTS = {
  111. alert: { closeOnPressEscape: false, closeOnClickModal: false },
  112. confirm: { showCancelButton: true },
  113. prompt: { showCancelButton: true, showInput: true }
  114. };
  115. MESSAGE_BOX_VARIANTS.forEach((boxType) => {
  116. MessageBox[boxType] = messageBoxFactory(
  117. boxType
  118. );
  119. });
  120. function messageBoxFactory(boxType) {
  121. return (message, title, options, appContext) => {
  122. let titleOrOpts = "";
  123. if (isObject(title)) {
  124. options = title;
  125. titleOrOpts = "";
  126. } else if (isUndefined(title)) {
  127. titleOrOpts = "";
  128. } else {
  129. titleOrOpts = title;
  130. }
  131. return MessageBox(
  132. Object.assign(
  133. {
  134. title: titleOrOpts,
  135. message,
  136. type: "",
  137. ...MESSAGE_BOX_DEFAULT_OPTS[boxType]
  138. },
  139. options,
  140. {
  141. boxType
  142. }
  143. ),
  144. appContext
  145. );
  146. };
  147. }
  148. MessageBox.close = () => {
  149. messageInstance.forEach((_, vm) => {
  150. vm.doClose();
  151. });
  152. messageInstance.clear();
  153. };
  154. MessageBox._context = null;
  155. export { MessageBox as default };
  156. //# sourceMappingURL=messageBox.mjs.map