5aca382d5c97452389a4a450e7198378a68c83070ad6f7f7c789805b97703a4efb8fe15c5b22153d86ed0fc771e9a965b20e32b72714930a441d35e597d98e 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  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('./message2.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 placement = vue.computed(() => props.placement || message.MESSAGE_DEFAULT_PLACEMENT);
  37. const lastOffset = vue.computed(() => instance.getLastOffset(props.id, placement.value));
  38. const offset = vue.computed(() => {
  39. return instance.getOffsetOrSpace(props.id, props.offset, placement.value) + lastOffset.value;
  40. });
  41. const bottom = vue.computed(() => height.value + offset.value);
  42. const horizontalClass = vue.computed(() => {
  43. if (placement.value.includes("left"))
  44. return ns.is("left");
  45. if (placement.value.includes("right"))
  46. return ns.is("right");
  47. return ns.is("center");
  48. });
  49. const verticalProperty = vue.computed(() => placement.value.startsWith("top") ? "top" : "bottom");
  50. const customStyle = vue.computed(() => ({
  51. [verticalProperty.value]: `${offset.value}px`,
  52. zIndex: currentZIndex.value
  53. }));
  54. function startTimer() {
  55. if (props.duration === 0)
  56. return;
  57. ({ stop: stopTimer } = core.useTimeoutFn(() => {
  58. close();
  59. }, props.duration));
  60. }
  61. function clearTimer() {
  62. stopTimer == null ? void 0 : stopTimer();
  63. }
  64. function close() {
  65. visible.value = false;
  66. vue.nextTick(() => {
  67. var _a;
  68. if (!isStartTransition.value) {
  69. (_a = props.onClose) == null ? void 0 : _a.call(props);
  70. emit("destroy");
  71. }
  72. });
  73. }
  74. function keydown({ code }) {
  75. if (code === aria.EVENT_CODE.esc) {
  76. close();
  77. }
  78. }
  79. vue.onMounted(() => {
  80. startTimer();
  81. nextZIndex();
  82. visible.value = true;
  83. });
  84. vue.watch(() => props.repeatNum, () => {
  85. clearTimer();
  86. startTimer();
  87. });
  88. core.useEventListener(document, "keydown", keydown);
  89. core.useResizeObserver(messageRef, () => {
  90. height.value = messageRef.value.getBoundingClientRect().height;
  91. });
  92. expose({
  93. visible,
  94. bottom,
  95. close
  96. });
  97. return (_ctx, _cache) => {
  98. return vue.openBlock(), vue.createBlock(vue.Transition, {
  99. name: vue.unref(ns).b("fade"),
  100. onBeforeEnter: ($event) => isStartTransition.value = true,
  101. onBeforeLeave: _ctx.onClose,
  102. onAfterLeave: ($event) => _ctx.$emit("destroy"),
  103. persisted: ""
  104. }, {
  105. default: vue.withCtx(() => [
  106. vue.withDirectives(vue.createElementVNode("div", {
  107. id: _ctx.id,
  108. ref_key: "messageRef",
  109. ref: messageRef,
  110. class: vue.normalizeClass([
  111. vue.unref(ns).b(),
  112. { [vue.unref(ns).m(_ctx.type)]: _ctx.type },
  113. vue.unref(ns).is("closable", _ctx.showClose),
  114. vue.unref(ns).is("plain", _ctx.plain),
  115. vue.unref(ns).is("bottom", vue.unref(verticalProperty) === "bottom"),
  116. vue.unref(horizontalClass),
  117. _ctx.customClass
  118. ]),
  119. style: vue.normalizeStyle(vue.unref(customStyle)),
  120. role: "alert",
  121. onMouseenter: clearTimer,
  122. onMouseleave: startTimer
  123. }, [
  124. _ctx.repeatNum > 1 ? (vue.openBlock(), vue.createBlock(vue.unref(index.ElBadge), {
  125. key: 0,
  126. value: _ctx.repeatNum,
  127. type: vue.unref(badgeType),
  128. class: vue.normalizeClass(vue.unref(ns).e("badge"))
  129. }, null, 8, ["value", "type", "class"])) : vue.createCommentVNode("v-if", true),
  130. vue.unref(iconComponent) ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ElIcon), {
  131. key: 1,
  132. class: vue.normalizeClass([vue.unref(ns).e("icon"), vue.unref(typeClass)])
  133. }, {
  134. default: vue.withCtx(() => [
  135. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(iconComponent))))
  136. ]),
  137. _: 1
  138. }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
  139. vue.renderSlot(_ctx.$slots, "default", {}, () => [
  140. !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", {
  141. key: 0,
  142. class: vue.normalizeClass(vue.unref(ns).e("content"))
  143. }, vue.toDisplayString(_ctx.message), 3)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
  144. vue.createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "),
  145. vue.createElementVNode("p", {
  146. class: vue.normalizeClass(vue.unref(ns).e("content")),
  147. innerHTML: _ctx.message
  148. }, null, 10, ["innerHTML"])
  149. ], 2112))
  150. ]),
  151. _ctx.showClose ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ElIcon), {
  152. key: 2,
  153. class: vue.normalizeClass(vue.unref(ns).e("closeBtn")),
  154. onClick: vue.withModifiers(close, ["stop"])
  155. }, {
  156. default: vue.withCtx(() => [
  157. vue.createVNode(vue.unref(Close))
  158. ]),
  159. _: 1
  160. }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
  161. ], 46, ["id"]), [
  162. [vue.vShow, visible.value]
  163. ])
  164. ]),
  165. _: 3
  166. }, 8, ["name", "onBeforeEnter", "onBeforeLeave", "onAfterLeave"]);
  167. };
  168. }
  169. });
  170. var MessageConstructor = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "message.vue"]]);
  171. exports["default"] = MessageConstructor;
  172. //# sourceMappingURL=message.js.map