2b3ff8b17fa6b95ca4b38a677cf6b7185d6afadc2786675dfa777eedeece8b33dd83f0324f6bcf76d7988f2e8c709cd8a11611e21b8f7c95ed3905759c348f 6.9 KB

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