tass-ui
Version:
A high quality UI Toolkit built on Vue.js3+.
90 lines (89 loc) • 2.96 kB
JavaScript
import { defineComponent, ref, computed, onMounted, onUnmounted, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, unref, normalizeStyle, createVNode, renderSlot, toDisplayString, createCommentVNode, vShow } from "vue";
import "../../../theme-chalk/src/message.scss.mjs";
import { TassIcon } from "../../icon/index.mjs";
import { MessageProps } from "./message.mjs";
const _hoisted_1 = ["id"];
const _hoisted_2 = { class: "tas-message__content" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "message",
props: MessageProps,
emits: ["destroy", "close"],
setup(__props, { emit }) {
const props = __props;
const iconMaps = {
info: "info",
success: "success",
error: "danger",
warning: "warning"
};
let visible = ref(false);
const close = () => visible.value = false;
const beforeLeave = () => {
emit("close");
};
const iconName = computed(() => {
const { type } = props;
return iconMaps[type];
});
let timer = null;
const startTimerFn = () => {
if (props.duration > 0) {
timer = setTimeout(() => {
visible.value = false;
}, props.duration);
}
};
const clearTimeFn = () => {
clearTimeout(Number(timer));
};
onMounted(() => {
visible.value = true;
startTimerFn();
});
let styles = computed(() => ({
top: `${props.offset}px`,
zIndex: props.zIndex
}));
const defClass = computed(() => ["tas-message--" + props.type, props.center ? "is-center" : ""]);
onUnmounted(() => {
clearTimeFn();
});
return (_ctx, _cache) => {
return openBlock(), createBlock(Transition, {
name: "tas-message-fade",
onBeforeLeave: beforeLeave,
onAfterLeave: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("destroy"))
}, {
default: withCtx(() => [
withDirectives(createElementVNode("div", {
id: _ctx.id,
class: normalizeClass(["tas-message", unref(defClass)]),
style: normalizeStyle(unref(styles)),
onMouseenter: clearTimeFn,
onMouseleave: startTimerFn
}, [
createVNode(unref(TassIcon), {
name: unref(iconName),
class: "tas-message__icon"
}, null, 8, ["name"]),
renderSlot(_ctx.$slots, "default", {}, () => [
createElementVNode("span", _hoisted_2, toDisplayString(_ctx.message), 1)
]),
_ctx.closeable ? (openBlock(), createBlock(unref(TassIcon), {
key: 0,
name: "cross",
class: "tas-message__close-btn",
onClick: close
})) : createCommentVNode("", true)
], 46, _hoisted_1), [
[vShow, unref(visible)]
])
]),
_: 3
});
};
}
});
export {
_sfc_main as default
};