message2.mjs 6.2 KB

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