@shopware-ag/meteor-component-library
Version:
The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).
214 lines (213 loc) • 7.48 kB
JavaScript
import '../mt-toast-notification.css';
;
const vue = require("vue");
const mtIcon_vue_vue_type_style_index_0_lang = require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
const MtButton = require("./MtButton.js");
const MtText = require("./MtText.js");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
require("../useIsInsideTooltip-f4674e27.js");
require("./MtLoader.js");
const _hoisted_1 = ["role", "aria-live"];
const _hoisted_2 = { class: "mt-toast-notification__content" };
const _hoisted_3 = { class: "mt-toast-notification__content-left" };
const _hoisted_4 = { class: "mt-toast-notification__content-right" };
const _hoisted_5 = {
key: 0,
class: "mt-toast-notification__timer"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "mt-toast-notification",
props: {
toast: {
type: Object,
required: true
},
quickDisplay: {
type: Boolean,
required: false,
default: false
},
index: {
type: Number,
required: false,
default: NaN
}
},
emits: ["remove-toast"],
setup(__props, { emit: __emit }) {
const emit = __emit;
const props = __props;
const classes = vue.computed(() => {
return {
"mt-toast-notification--positive": toast.value.type === "positive",
"mt-toast-notification--critical": toast.value.type === "critical",
"mt-toast-notification--informal": toast.value.type === "informal"
};
});
const messageClasses = vue.computed(() => {
return {
"mt-toast-notification__message-space": !!toast.value.icon
};
});
const showTimer = vue.computed(() => {
if (quickDisplay.value || index.value !== 0 || toast.value.type === "critical" && toast.value.action) {
return false;
}
return true;
});
const role = vue.computed(() => {
if (toast.value.type === "critical" && toast.value.action) {
return "alertdialog";
}
switch (toast.value.type) {
case "positive":
case "informal":
default:
return "log";
case "critical":
return "alert";
}
});
const ariaLive = vue.computed(() => {
switch (toast.value.type) {
case "positive":
case "informal":
default:
return "polite";
case "critical":
return "assertive";
}
});
const { toast, quickDisplay, index } = vue.toRefs(props);
const toastEl = vue.ref(null);
let timeoutId = vue.ref(void 0);
let timeoutStartTime = vue.ref(void 0);
let remainingTimeOut = vue.ref(quickDisplay.value ? 3700 : 10500);
vue.watch(
showTimer,
(newValue) => {
if (!newValue && !quickDisplay.value) {
if (timeoutId.value) {
window.clearTimeout(timeoutId.value);
timeoutId.value = void 0;
remainingTimeOut.value = 10500;
}
return;
}
timeoutStartTime.value = Date.now();
timeoutId.value = window.setTimeout(() => {
onRemoveToast();
}, remainingTimeOut.value);
},
{ immediate: true }
);
function pauseTimer() {
if (!timeoutId.value || quickDisplay.value) {
return;
}
window.clearTimeout(timeoutId.value);
const previousTime = timeoutStartTime.value ?? Date.now();
remainingTimeOut.value = remainingTimeOut.value - (Date.now() - previousTime);
}
function resumeTimer() {
if (!showTimer.value || quickDisplay.value) {
return;
}
timeoutStartTime.value = Date.now();
timeoutId.value = window.setTimeout(() => {
onRemoveToast();
}, remainingTimeOut.value);
}
function onRemoveToast() {
if (timeoutId.value) {
window.clearTimeout(timeoutId.value);
}
emit("remove-toast", toast.value.id);
}
function onActionClick() {
var _a, _b;
(_b = (_a = toast.value) == null ? void 0 : _a.action) == null ? void 0 : _b.callback();
onRemoveToast();
}
vue.onMounted(() => {
var _a;
if (!toastEl.value || !toast.value.action || toast.value.type !== "critical") {
return;
}
(_a = toastEl.value) == null ? void 0 : _a.focus();
});
vue.onBeforeUnmount(() => {
if (!timeoutId.value) {
return;
}
window.clearTimeout(timeoutId.value);
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(["mt-toast-notification", classes.value]),
ref_key: "toastEl",
ref: toastEl,
role: role.value,
"aria-live": ariaLive.value,
tabindex: "0",
onMouseenter: pauseTimer,
onMouseleave: resumeTimer,
onKeydown: vue.withKeys(onRemoveToast, ["esc"])
}, [
vue.createElementVNode("div", _hoisted_2, [
vue.createElementVNode("div", _hoisted_3, [
vue.unref(toast).icon ? (vue.openBlock(), vue.createBlock(mtIcon_vue_vue_type_style_index_0_lang._sfc_main, {
key: 0,
class: "mt-toast-notification__icon",
name: vue.unref(toast).icon,
size: "20px"
}, null, 8, ["name"])) : vue.createCommentVNode("", true),
vue.createVNode(MtText, {
class: vue.normalizeClass(["mt-toast-notification__message", messageClasses.value]),
color: "color-static-white",
weight: "bold",
size: "xs",
title: vue.unref(toast).msg
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(vue.unref(toast).msg), 1)
]),
_: 1
}, 8, ["class", "title"])
]),
vue.createElementVNode("div", _hoisted_4, [
vue.unref(toast).action ? (vue.openBlock(), vue.createBlock(MtButton, {
key: 0,
onClick: onActionClick,
size: "small"
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(vue.unref(toast).action.label), 1)
]),
_: 1
})) : vue.createCommentVNode("", true)
]),
vue.unref(toast).dismissible || vue.unref(toast).action ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: "mt-toast-notification__close-action",
"aria-hidden": "true",
"data-testid": "dismiss-toast",
onClick: onRemoveToast
}, [
vue.createVNode(mtIcon_vue_vue_type_style_index_0_lang._sfc_main, {
name: "solid-times-circle",
size: "20px"
})
])) : vue.createCommentVNode("", true)
]),
showTimer.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, _cache[0] || (_cache[0] = [
vue.createElementVNode("div", { class: "mt-toast-notification__timer-loader" }, null, -1)
]))) : vue.createCommentVNode("", true)
], 42, _hoisted_1);
};
}
});
const mtToastNotification_vue_vue_type_style_index_0_scoped_16c30a4e_lang = "";
const MtToastNotification = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-16c30a4e"]]);
module.exports = MtToastNotification;
//# sourceMappingURL=MtToastNotification.js.map