UNPKG

element-plus

Version:

A Component Library for Vue 3

159 lines (156 loc) 5.91 kB
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