46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
import { defineComponent, ref, watch } from "vue";
|
|
import { ssrRenderTeleport, ssrRenderClass, ssrRenderStyle, ssrInterpolate } from "vue/server-renderer";
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "NotificationToast",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
message: { default: "" },
|
|
type: { default: "success" },
|
|
duration: { default: 3e3 }
|
|
},
|
|
emits: ["close"],
|
|
setup(__props, { emit: __emit }) {
|
|
const props = __props;
|
|
const show = ref(false);
|
|
const emit = __emit;
|
|
watch(() => props.message, (newVal) => {
|
|
if (newVal) {
|
|
show.value = true;
|
|
setTimeout(() => {
|
|
show.value = false;
|
|
setTimeout(() => {
|
|
emit("close");
|
|
}, 300);
|
|
}, props.duration);
|
|
}
|
|
}, { immediate: true });
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
ssrRenderTeleport(_push, (_push2) => {
|
|
if (_ctx.message) {
|
|
_push2(`<div class="${ssrRenderClass([
|
|
"fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 transform transition-all duration-300",
|
|
_ctx.type === "success" ? "bg-green-500" : "bg-red-500",
|
|
"text-white"
|
|
])}" style="${ssrRenderStyle({ transform: show.value ? "translateY(0)" : "translateY(-100%)" })}">${ssrInterpolate(_ctx.message)}</div>`);
|
|
} else {
|
|
_push2(`<!---->`);
|
|
}
|
|
}, "body", false, _parent);
|
|
};
|
|
}
|
|
});
|
|
export {
|
|
_sfc_main as default
|
|
};
|
|
//# sourceMappingURL=NotificationToast.vue2.mjs.map
|