notify.mjs 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. import { isVNode, createVNode, render } from 'vue';
  2. import NotificationConstructor from './notification2.mjs';
  3. import { notificationTypes } from './notification.mjs';
  4. import { isClient } from '@vueuse/core';
  5. import { isString, isFunction } from '@vue/shared';
  6. import { isElement, isUndefined } from '../../../utils/types.mjs';
  7. import { debugWarn } from '../../../utils/error.mjs';
  8. const notifications = {
  9. "top-left": [],
  10. "top-right": [],
  11. "bottom-left": [],
  12. "bottom-right": []
  13. };
  14. const GAP_SIZE = 16;
  15. let seed = 1;
  16. const notify = function(options = {}, context) {
  17. if (!isClient)
  18. return { close: () => void 0 };
  19. if (isString(options) || isVNode(options)) {
  20. options = { message: options };
  21. }
  22. const position = options.position || "top-right";
  23. let verticalOffset = options.offset || 0;
  24. notifications[position].forEach(({ vm: vm2 }) => {
  25. var _a;
  26. verticalOffset += (((_a = vm2.el) == null ? void 0 : _a.offsetHeight) || 0) + GAP_SIZE;
  27. });
  28. verticalOffset += GAP_SIZE;
  29. const id = `notification_${seed++}`;
  30. const userOnClose = options.onClose;
  31. const props = {
  32. ...options,
  33. offset: verticalOffset,
  34. id,
  35. onClose: () => {
  36. close(id, position, userOnClose);
  37. }
  38. };
  39. let appendTo = document.body;
  40. if (isElement(options.appendTo)) {
  41. appendTo = options.appendTo;
  42. } else if (isString(options.appendTo)) {
  43. appendTo = document.querySelector(options.appendTo);
  44. }
  45. if (!isElement(appendTo)) {
  46. debugWarn("ElNotification", "the appendTo option is not an HTMLElement. Falling back to document.body.");
  47. appendTo = document.body;
  48. }
  49. const container = document.createElement("div");
  50. const vm = createVNode(NotificationConstructor, props, isFunction(props.message) ? props.message : isVNode(props.message) ? () => props.message : null);
  51. vm.appContext = isUndefined(context) ? notify._context : context;
  52. vm.props.onDestroy = () => {
  53. render(null, container);
  54. };
  55. render(vm, container);
  56. notifications[position].push({ vm });
  57. appendTo.appendChild(container.firstElementChild);
  58. return {
  59. close: () => {
  60. vm.component.exposed.visible.value = false;
  61. }
  62. };
  63. };
  64. notificationTypes.forEach((type) => {
  65. notify[type] = (options = {}, appContext) => {
  66. if (isString(options) || isVNode(options)) {
  67. options = {
  68. message: options
  69. };
  70. }
  71. return notify({ ...options, type }, appContext);
  72. };
  73. });
  74. function close(id, position, userOnClose) {
  75. const orientedNotifications = notifications[position];
  76. const idx = orientedNotifications.findIndex(({ vm: vm2 }) => {
  77. var _a;
  78. return ((_a = vm2.component) == null ? void 0 : _a.props.id) === id;
  79. });
  80. if (idx === -1)
  81. return;
  82. const { vm } = orientedNotifications[idx];
  83. if (!vm)
  84. return;
  85. userOnClose == null ? void 0 : userOnClose(vm);
  86. const removedHeight = vm.el.offsetHeight;
  87. const verticalPos = position.split("-")[0];
  88. orientedNotifications.splice(idx, 1);
  89. const len = orientedNotifications.length;
  90. if (len < 1)
  91. return;
  92. for (let i = idx; i < len; i++) {
  93. const { el, component } = orientedNotifications[i].vm;
  94. const pos = Number.parseInt(el.style[verticalPos], 10) - removedHeight - GAP_SIZE;
  95. component.props.offset = pos;
  96. }
  97. }
  98. function closeAll() {
  99. for (const orientedNotifications of Object.values(notifications)) {
  100. orientedNotifications.forEach(({ vm }) => {
  101. vm.component.exposed.visible.value = false;
  102. });
  103. }
  104. }
  105. notify.closeAll = closeAll;
  106. notify._context = null;
  107. export { close, closeAll, notify as default };
  108. //# sourceMappingURL=notify.mjs.map