message2.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var core = require('@vueuse/core');
  5. var index = require('../../badge/index.js');
  6. var index$1 = require('../../icon/index.js');
  7. var message = require('./message.js');
  8. var instance = require('./instance.js');
  9. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  10. var useGlobalConfig = require('../../config-provider/src/hooks/use-global-config.js');
  11. var icon = require('../../../utils/vue/icon.js');
  12. var aria = require('../../../constants/aria.js');
  13. const __default__ = vue.defineComponent({
  14. name: "ElMessage"
  15. });
  16. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  17. ...__default__,
  18. props: message.messageProps,
  19. emits: message.messageEmits,
  20. setup(__props, { expose, emit }) {
  21. const props = __props;
  22. const { Close } = icon.TypeComponents;
  23. const isStartTransition = vue.ref(false);
  24. const { ns, zIndex } = useGlobalConfig.useGlobalComponentSettings("message");
  25. const { currentZIndex, nextZIndex } = zIndex;
  26. const messageRef = vue.ref();
  27. const visible = vue.ref(false);
  28. const height = vue.ref(0);
  29. let stopTimer = void 0;
  30. const badgeType = vue.computed(() => props.type ? props.type === "error" ? "danger" : props.type : "info");
  31. const typeClass = vue.computed(() => {
  32. const type = props.type;
  33. return { [ns.bm("icon", type)]: type && icon.TypeComponentsMap[type] };
  34. });
  35. const iconComponent = vue.computed(() => props.icon || icon.TypeComponentsMap[props.type] || "");
  36. const lastOffset = vue.computed(() => instance.getLastOffset(props.id));
  37. const offset = vue.computed(() => instance.getOffsetOrSpace(props.id, props.offset) + lastOffset.value);
  38. const bottom = vue.computed(() => height.value + offset.value);
  39. const customStyle = vue.computed(() => ({
  40. top: `${offset.value}px`,
  41. zIndex: currentZIndex.value
  42. }));
  43. function startTimer() {
  44. if (props.duration === 0)
  45. return;
  46. ({ stop: stopTimer } = core.useTimeoutFn(() => {
  47. close();
  48. }, props.duration));
  49. }
  50. function clearTimer() {
  51. stopTimer == null ? void 0 : stopTimer();
  52. }
  53. function close() {
  54. visible.value = false;
  55. vue.nextTick(() => {
  56. var _a;
  57. if (!isStartTransition.value) {
  58. (_a = props.onClose) == null ? void 0 : _a.call(props);
  59. emit("destroy");
  60. }
  61. });
  62. }
  63. function keydown({ code }) {
  64. if (code === aria.EVENT_CODE.esc) {
  65. close();
  66. }
  67. }
  68. vue.onMounted(() => {
  69. startTimer();
  70. nextZIndex();
  71. visible.value = true;
  72. });
  73. vue.watch(() => props.repeatNum, () => {
  74. clearTimer();
  75. startTimer();
  76. });
  77. core.useEventListener(document, "keydown", keydown);
  78. core.useResizeObserver(messageRef, () => {
  79. height.value = messageRef.value.getBoundingClientRect().height;
  80. });
  81. expose({
  82. visible,
  83. bottom,
  84. close
  85. });
  86. return (_ctx, _cache) => {
  87. return vue.openBlock(), vue.createBlock(vue.Transition, {
  88. name: vue.unref(ns).b("fade"),
  89. onBeforeEnter: ($event) => isStartTransition.value = true,
  90. onBeforeLeave: _ctx.onClose,
  91. onAfterLeave: ($event) => _ctx.$emit("destroy"),
  92. persisted: ""
  93. }, {
  94. default: vue.withCtx(() => [
  95. vue.withDirectives(vue.createElementVNode("div", {
  96. id: _ctx.id,
  97. ref_key: "messageRef",
  98. ref: messageRef,
  99. class: vue.normalizeClass([
  100. vue.unref(ns).b(),
  101. { [vue.unref(ns).m(_ctx.type)]: _ctx.type },
  102. vue.unref(ns).is("closable", _ctx.showClose),
  103. vue.unref(ns).is("plain", _ctx.plain),
  104. _ctx.customClass
  105. ]),
  106. style: vue.normalizeStyle(vue.unref(customStyle)),
  107. role: "alert",
  108. onMouseenter: clearTimer,
  109. onMouseleave: startTimer
  110. }, [
  111. _ctx.repeatNum > 1 ? (vue.openBlock(), vue.createBlock(vue.unref(index.ElBadge), {
  112. key: 0,
  113. value: _ctx.repeatNum,
  114. type: vue.unref(badgeType),
  115. class: vue.normalizeClass(vue.unref(ns).e("badge"))
  116. }, null, 8, ["value", "type", "class"])) : vue.createCommentVNode("v-if", true),
  117. vue.unref(iconComponent) ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ElIcon), {
  118. key: 1,
  119. class: vue.normalizeClass([vue.unref(ns).e("icon"), vue.unref(typeClass)])
  120. }, {
  121. default: vue.withCtx(() => [
  122. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(iconComponent))))
  123. ]),
  124. _: 1
  125. }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
  126. vue.renderSlot(_ctx.$slots, "default", {}, () => [
  127. !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", {
  128. key: 0,
  129. class: vue.normalizeClass(vue.unref(ns).e("content"))
  130. }, vue.toDisplayString(_ctx.message), 3)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
  131. vue.createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "),
  132. vue.createElementVNode("p", {
  133. class: vue.normalizeClass(vue.unref(ns).e("content")),
  134. innerHTML: _ctx.message
  135. }, null, 10, ["innerHTML"])
  136. ], 2112))
  137. ]),
  138. _ctx.showClose ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ElIcon), {
  139. key: 2,
  140. class: vue.normalizeClass(vue.unref(ns).e("closeBtn")),
  141. onClick: vue.withModifiers(close, ["stop"])
  142. }, {
  143. default: vue.withCtx(() => [
  144. vue.createVNode(vue.unref(Close))
  145. ]),
  146. _: 1
  147. }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
  148. ], 46, ["id"]), [
  149. [vue.vShow, visible.value]
  150. ])
  151. ]),
  152. _: 3
  153. }, 8, ["name", "onBeforeEnter", "onBeforeLeave", "onAfterLeave"]);
  154. };
  155. }
  156. });
  157. var MessageConstructor = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "message.vue"]]);
  158. exports["default"] = MessageConstructor;
  159. //# sourceMappingURL=message2.js.map