notify.js 3.6 KB

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