element-plus
Version:
A Component Library for Vue 3
159 lines (156 loc) • 5.91 kB
JavaScript
import { defineComponent, ref, computed, onMounted, watch, resolveComponent, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, createCommentVNode, resolveDynamicComponent, renderSlot, createElementBlock, toDisplayString, Fragment, withModifiers, createVNode, vShow } from 'vue';
import { useTimeoutFn, useEventListener } from '@vueuse/core';
import '../../../utils/index.mjs';
import '../../../constants/index.mjs';
import { ElBadge } from '../../badge/index.mjs';
import { ElIcon } from '../../icon/index.mjs';
import '../../../hooks/index.mjs';
import { messageProps, messageEmits } from './message.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { TypeComponents, TypeComponentsMap } from '../../../utils/vue/icon.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { EVENT_CODE } from '../../../constants/aria.mjs';
const _sfc_main = defineComponent({
name: "ElMessage",
components: {
ElBadge,
ElIcon,
...TypeComponents
},
props: messageProps,
emits: messageEmits,
setup(props) {
const ns = useNamespace("message");
const visible = ref(false);
const badgeType = ref(props.type ? props.type === "error" ? "danger" : props.type : "info");
let stopTimer = void 0;
const typeClass = computed(() => {
const type = props.type;
return { [ns.bm("icon", type)]: type && TypeComponentsMap[type] };
});
const iconComponent = computed(() => {
return props.icon || TypeComponentsMap[props.type] || "";
});
const customStyle = computed(() => ({
top: `${props.offset}px`,
zIndex: props.zIndex
}));
function startTimer() {
if (props.duration > 0) {
;
({ stop: stopTimer } = useTimeoutFn(() => {
if (visible.value)
close();
}, props.duration));
}
}
function clearTimer() {
stopTimer == null ? void 0 : stopTimer();
}
function close() {
visible.value = false;
}
function keydown({ code }) {
if (code === EVENT_CODE.esc) {
if (visible.value) {
close();
}
} else {
startTimer();
}
}
onMounted(() => {
startTimer();
visible.value = true;
});
watch(() => props.repeatNum, () => {
clearTimer();
startTimer();
});
useEventListener(document, "keydown", keydown);
return {
ns,
typeClass,
iconComponent,
customStyle,
visible,
badgeType,
close,
clearTimer,
startTimer
};
}
});
const _hoisted_1 = ["id"];
const _hoisted_2 = ["innerHTML"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_badge = resolveComponent("el-badge");
const _component_el_icon = resolveComponent("el-icon");
const _component_close = resolveComponent("close");
return openBlock(), createBlock(Transition, {
name: _ctx.ns.b("fade"),
onBeforeLeave: _ctx.onClose,
onAfterLeave: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("destroy"))
}, {
default: withCtx(() => [
withDirectives(createElementVNode("div", {
id: _ctx.id,
class: normalizeClass([
_ctx.ns.b(),
{ [_ctx.ns.m(_ctx.type)]: _ctx.type && !_ctx.icon },
_ctx.ns.is("center", _ctx.center),
_ctx.ns.is("closable", _ctx.showClose),
_ctx.customClass
]),
style: normalizeStyle(_ctx.customStyle),
role: "alert",
onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.clearTimer && _ctx.clearTimer(...args)),
onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.startTimer && _ctx.startTimer(...args))
}, [
_ctx.repeatNum > 1 ? (openBlock(), createBlock(_component_el_badge, {
key: 0,
value: _ctx.repeatNum,
type: _ctx.badgeType,
class: normalizeClass(_ctx.ns.e("badge"))
}, null, 8, ["value", "type", "class"])) : createCommentVNode("v-if", true),
_ctx.iconComponent ? (openBlock(), createBlock(_component_el_icon, {
key: 1,
class: normalizeClass([_ctx.ns.e("icon"), _ctx.typeClass])
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
]),
_: 1
}, 8, ["class"])) : createCommentVNode("v-if", true),
renderSlot(_ctx.$slots, "default", {}, () => [
!_ctx.dangerouslyUseHTMLString ? (openBlock(), createElementBlock("p", {
key: 0,
class: normalizeClass(_ctx.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(_ctx.ns.e("content")),
innerHTML: _ctx.message
}, null, 10, _hoisted_2)
], 2112))
]),
_ctx.showClose ? (openBlock(), createBlock(_component_el_icon, {
key: 2,
class: normalizeClass(_ctx.ns.e("closeBtn")),
onClick: withModifiers(_ctx.close, ["stop"])
}, {
default: withCtx(() => [
createVNode(_component_close)
]),
_: 1
}, 8, ["class", "onClick"])) : createCommentVNode("v-if", true)
], 46, _hoisted_1), [
[vShow, _ctx.visible]
])
]),
_: 3
}, 8, ["name", "onBeforeLeave"]);
}
var MessageConstructor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/message/src/message.vue"]]);
export { MessageConstructor as default };
//# sourceMappingURL=message2.mjs.map