| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- 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';
- import { useEventListener, useResizeObserver, useTimeoutFn } from '@vueuse/core';
- import { ElBadge } from '../../badge/index.mjs';
- import { ElIcon } from '../../icon/index.mjs';
- import { messageProps, messageEmits, MESSAGE_DEFAULT_PLACEMENT } from './message2.mjs';
- import { getLastOffset, getOffsetOrSpace } from './instance.mjs';
- import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
- import { useGlobalComponentSettings } from '../../config-provider/src/hooks/use-global-config.mjs';
- import { TypeComponentsMap, TypeComponents } from '../../../utils/vue/icon.mjs';
- import { EVENT_CODE } from '../../../constants/aria.mjs';
- const __default__ = defineComponent({
- name: "ElMessage"
- });
- const _sfc_main = /* @__PURE__ */ defineComponent({
- ...__default__,
- props: messageProps,
- emits: messageEmits,
- setup(__props, { expose, emit }) {
- const props = __props;
- const { Close } = TypeComponents;
- const isStartTransition = ref(false);
- const { ns, zIndex } = useGlobalComponentSettings("message");
- const { currentZIndex, nextZIndex } = zIndex;
- const messageRef = ref();
- const visible = ref(false);
- const height = ref(0);
- let stopTimer = void 0;
- const badgeType = computed(() => props.type ? props.type === "error" ? "danger" : props.type : "info");
- const typeClass = computed(() => {
- const type = props.type;
- return { [ns.bm("icon", type)]: type && TypeComponentsMap[type] };
- });
- const iconComponent = computed(() => props.icon || TypeComponentsMap[props.type] || "");
- const placement = computed(() => props.placement || MESSAGE_DEFAULT_PLACEMENT);
- const lastOffset = computed(() => getLastOffset(props.id, placement.value));
- const offset = computed(() => {
- return getOffsetOrSpace(props.id, props.offset, placement.value) + lastOffset.value;
- });
- const bottom = computed(() => height.value + offset.value);
- const horizontalClass = computed(() => {
- if (placement.value.includes("left"))
- return ns.is("left");
- if (placement.value.includes("right"))
- return ns.is("right");
- return ns.is("center");
- });
- const verticalProperty = computed(() => placement.value.startsWith("top") ? "top" : "bottom");
- const customStyle = computed(() => ({
- [verticalProperty.value]: `${offset.value}px`,
- zIndex: currentZIndex.value
- }));
- function startTimer() {
- if (props.duration === 0)
- return;
- ({ stop: stopTimer } = useTimeoutFn(() => {
- close();
- }, props.duration));
- }
- function clearTimer() {
- stopTimer == null ? void 0 : stopTimer();
- }
- function close() {
- visible.value = false;
- nextTick(() => {
- var _a;
- if (!isStartTransition.value) {
- (_a = props.onClose) == null ? void 0 : _a.call(props);
- emit("destroy");
- }
- });
- }
- function keydown({ code }) {
- if (code === EVENT_CODE.esc) {
- close();
- }
- }
- onMounted(() => {
- startTimer();
- nextZIndex();
- visible.value = true;
- });
- watch(() => props.repeatNum, () => {
- clearTimer();
- startTimer();
- });
- useEventListener(document, "keydown", keydown);
- useResizeObserver(messageRef, () => {
- height.value = messageRef.value.getBoundingClientRect().height;
- });
- expose({
- visible,
- bottom,
- close
- });
- return (_ctx, _cache) => {
- return openBlock(), createBlock(Transition, {
- name: unref(ns).b("fade"),
- onBeforeEnter: ($event) => isStartTransition.value = true,
- onBeforeLeave: _ctx.onClose,
- onAfterLeave: ($event) => _ctx.$emit("destroy"),
- persisted: ""
- }, {
- default: withCtx(() => [
- withDirectives(createElementVNode("div", {
- id: _ctx.id,
- ref_key: "messageRef",
- ref: messageRef,
- class: normalizeClass([
- unref(ns).b(),
- { [unref(ns).m(_ctx.type)]: _ctx.type },
- unref(ns).is("closable", _ctx.showClose),
- unref(ns).is("plain", _ctx.plain),
- unref(ns).is("bottom", unref(verticalProperty) === "bottom"),
- unref(horizontalClass),
- _ctx.customClass
- ]),
- style: normalizeStyle(unref(customStyle)),
- role: "alert",
- onMouseenter: clearTimer,
- onMouseleave: startTimer
- }, [
- _ctx.repeatNum > 1 ? (openBlock(), createBlock(unref(ElBadge), {
- key: 0,
- value: _ctx.repeatNum,
- type: unref(badgeType),
- class: normalizeClass(unref(ns).e("badge"))
- }, null, 8, ["value", "type", "class"])) : createCommentVNode("v-if", true),
- unref(iconComponent) ? (openBlock(), createBlock(unref(ElIcon), {
- key: 1,
- class: normalizeClass([unref(ns).e("icon"), unref(typeClass)])
- }, {
- default: withCtx(() => [
- (openBlock(), createBlock(resolveDynamicComponent(unref(iconComponent))))
- ]),
- _: 1
- }, 8, ["class"])) : createCommentVNode("v-if", true),
- renderSlot(_ctx.$slots, "default", {}, () => [
- !_ctx.dangerouslyUseHTMLString ? (openBlock(), createElementBlock("p", {
- key: 0,
- class: normalizeClass(unref(ns).e("content"))
- }, toDisplayString(_ctx.message), 3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
- createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "),
- createElementVNode("p", {
- class: normalizeClass(unref(ns).e("content")),
- innerHTML: _ctx.message
- }, null, 10, ["innerHTML"])
- ], 2112))
- ]),
- _ctx.showClose ? (openBlock(), createBlock(unref(ElIcon), {
- key: 2,
- class: normalizeClass(unref(ns).e("closeBtn")),
- onClick: withModifiers(close, ["stop"])
- }, {
- default: withCtx(() => [
- createVNode(unref(Close))
- ]),
- _: 1
- }, 8, ["class", "onClick"])) : createCommentVNode("v-if", true)
- ], 46, ["id"]), [
- [vShow, visible.value]
- ])
- ]),
- _: 3
- }, 8, ["name", "onBeforeEnter", "onBeforeLeave", "onAfterLeave"]);
- };
- }
- });
- var MessageConstructor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "message.vue"]]);
- export { MessageConstructor as default };
- //# sourceMappingURL=message.mjs.map
|