@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/).
215 lines (214 loc) • 7.37 kB
JavaScript
import '../mt-toast-notification.css';
import { defineComponent, computed, toRefs, ref, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, withKeys, createElementVNode, unref, createBlock, createCommentVNode, createVNode, withCtx, createTextVNode, toDisplayString } from "vue";
import { _ as _sfc_main$1 } from "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import MtButton from "./MtButton.js";
import MtText from "./MtText.js";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
import "../useIsInsideTooltip-0c3bd290.mjs";
import "./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__ */ 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 = 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 = computed(() => {
return {
"mt-toast-notification__message-space": !!toast.value.icon
};
});
const showTimer = computed(() => {
if (quickDisplay.value || index.value !== 0 || toast.value.type === "critical" && toast.value.action) {
return false;
}
return true;
});
const role = 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 = computed(() => {
switch (toast.value.type) {
case "positive":
case "informal":
default:
return "polite";
case "critical":
return "assertive";
}
});
const { toast, quickDisplay, index } = toRefs(props);
const toastEl = ref(null);
let timeoutId = ref(void 0);
let timeoutStartTime = ref(void 0);
let remainingTimeOut = ref(quickDisplay.value ? 3700 : 10500);
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();
}
onMounted(() => {
var _a;
if (!toastEl.value || !toast.value.action || toast.value.type !== "critical") {
return;
}
(_a = toastEl.value) == null ? void 0 : _a.focus();
});
onBeforeUnmount(() => {
if (!timeoutId.value) {
return;
}
window.clearTimeout(timeoutId.value);
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: 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: withKeys(onRemoveToast, ["esc"])
}, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
unref(toast).icon ? (openBlock(), createBlock(_sfc_main$1, {
key: 0,
class: "mt-toast-notification__icon",
name: unref(toast).icon,
size: "20px"
}, null, 8, ["name"])) : createCommentVNode("", true),
createVNode(MtText, {
class: normalizeClass(["mt-toast-notification__message", messageClasses.value]),
color: "color-static-white",
weight: "bold",
size: "xs",
title: unref(toast).msg
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(toast).msg), 1)
]),
_: 1
}, 8, ["class", "title"])
]),
createElementVNode("div", _hoisted_4, [
unref(toast).action ? (openBlock(), createBlock(MtButton, {
key: 0,
onClick: onActionClick,
size: "small"
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(toast).action.label), 1)
]),
_: 1
})) : createCommentVNode("", true)
]),
unref(toast).dismissible || unref(toast).action ? (openBlock(), createElementBlock("div", {
key: 0,
class: "mt-toast-notification__close-action",
"aria-hidden": "true",
"data-testid": "dismiss-toast",
onClick: onRemoveToast
}, [
createVNode(_sfc_main$1, {
name: "solid-times-circle",
size: "20px"
})
])) : createCommentVNode("", true)
]),
showTimer.value ? (openBlock(), createElementBlock("div", _hoisted_5, _cache[0] || (_cache[0] = [
createElementVNode("div", { class: "mt-toast-notification__timer-loader" }, null, -1)
]))) : createCommentVNode("", true)
], 42, _hoisted_1);
};
}
});
const mtToastNotification_vue_vue_type_style_index_0_scoped_16c30a4e_lang = "";
const MtToastNotification = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-16c30a4e"]]);
export {
MtToastNotification as default
};
//# sourceMappingURL=MtToastNotification.js.map