@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/).
325 lines (324 loc) • 11.2 kB
JavaScript
import '../mt-snackbar-notification.css';
import { defineComponent, ref, computed, toRefs, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, normalizeStyle, 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 MtText from "./MtText.js";
import MtLink from "./MtLink.js";
import MtLoader from "./MtLoader.js";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
const _hoisted_1 = ["role", "aria-live", "data-mounted", "data-removed"];
const _hoisted_2 = { class: "mt-snackbar-notification__content" };
const _hoisted_3 = { class: "mt-snackbar-notification__text-content" };
const _hoisted_4 = {
key: 0,
class: "mt-snackbar-notification__symbol-container"
};
const _hoisted_5 = {
key: 1,
class: "mt-snackbar-notification__progress"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "mt-snackbar-notification",
props: {
snackbar: {
type: Object,
required: true
},
isHovered: {
type: Boolean,
default: false
},
heights: {
type: Array,
default: () => []
}
},
emits: ["remove-snackbar", "update:height"],
setup(__props, { emit: __emit }) {
const emit = __emit;
const props = __props;
const mounted = ref(false);
const removed = ref(false);
const offsetBeforeRemove = ref(0);
const classes = computed(() => {
return {
"mt-snackbar-notification--success": snackbar.value.variant === "success" || isUploadComplete.value,
"mt-snackbar-notification--error": snackbar.value.variant === "error" || isUploadError.value,
"mt-snackbar-notification--progress": snackbar.value.variant === "progress"
};
});
const heightIndex = computed(() => {
const index = props.heights.findIndex((height) => height.snackbarId === props.snackbar.id);
return index >= 0 ? index : 0;
});
const toastsHeightBefore = computed(() => {
return props.heights.reduce((prev, curr, reducerIndex) => {
if (reducerIndex >= heightIndex.value) {
return prev;
}
return prev + curr.height;
}, 0);
});
const offset = computed(() => heightIndex.value * 16 + toastsHeightBefore.value || 0);
const progressPercentage = computed(() => {
return `(${snackbar.value.progressPercentage || 0}%)`;
});
const isUploadComplete = computed(() => {
return snackbar.value.variant === "progress" && snackbar.value.uploadState === "success";
});
const isUploadError = computed(() => {
return snackbar.value.variant === "progress" && snackbar.value.uploadState === "error";
});
const isUploading = computed(() => {
return snackbar.value.variant === "progress" && !snackbar.value.uploadState;
});
const displayMessage = computed(() => {
if (isUploadComplete.value) {
return snackbar.value.successMessage || "Upload completed";
}
if (isUploadError.value) {
return snackbar.value.errorMessage || "Upload failed";
}
return snackbar.value.message;
});
const icon = computed(() => {
switch (snackbar.value.variant) {
case "error":
return "solid-exclamation-circle";
case "success":
return "solid-check-circle";
case "progress":
if (isUploadComplete.value) {
return "solid-check-circle";
}
if (isUploadError.value) {
return "solid-exclamation-circle";
}
return void 0;
default:
return void 0;
}
});
const role = computed(() => {
switch (snackbar.value.variant) {
case "error":
return "alert";
case "success":
return "log";
default:
return "log";
}
});
const ariaLive = computed(() => {
switch (snackbar.value.variant) {
case "error":
case "warning":
return "assertive";
case "success":
case "progress":
default:
return "polite";
}
});
const { snackbar, isHovered } = toRefs(props);
const snackbarEl = ref(null);
const timeoutId = ref(void 0);
const successTimeoutId = ref(void 0);
const remainingTimeOut = ref(snackbar.value.duration || 5e3);
const pausedAt = ref(null);
const isPaused = ref(false);
const successPausedAt = ref(null);
const isSuccessPaused = ref(false);
watch(mounted, () => {
if (!mounted.value || !snackbarEl.value)
return;
const snackbarNode = snackbarEl.value;
const originalHeight = snackbarNode.style.height;
snackbarNode.style.height = "auto";
const newHeight = snackbarNode.getBoundingClientRect().height;
snackbarNode.style.height = originalHeight;
emit("update:height", {
snackbarId: props.snackbar.id,
height: newHeight
});
});
watch(isHovered, (newIsHovered) => {
if (newIsHovered) {
pauseTimer();
pauseSuccessTimer();
} else {
resumeTimer();
resumeSuccessTimer();
}
});
watch(
() => snackbar.value.duration,
(newDuration) => {
if (snackbar.value.variant === "progress") {
return;
}
if (newDuration === 0) {
if (timeoutId.value) {
window.clearTimeout(timeoutId.value);
timeoutId.value = void 0;
remainingTimeOut.value = newDuration || 5e3;
}
return;
}
if (!isPaused.value) {
timeoutId.value = window.setTimeout(() => {
onRemoveSnackbar();
}, remainingTimeOut.value);
}
},
{ immediate: true }
);
watch(
() => snackbar.value.uploadState,
(newUploadState) => {
if (snackbar.value.variant === "progress" && (newUploadState === "success" || newUploadState === "error")) {
if (!isSuccessPaused.value) {
successTimeoutId.value = window.setTimeout(() => {
onRemoveSnackbar();
}, 2e3);
}
}
}
);
function pauseTimer() {
if (timeoutId.value && !isPaused.value) {
window.clearTimeout(timeoutId.value);
timeoutId.value = void 0;
pausedAt.value = Date.now();
isPaused.value = true;
}
}
function resumeTimer() {
if (isPaused.value && pausedAt.value) {
const elapsed = Date.now() - pausedAt.value;
const newRemainingTime = Math.max(0, remainingTimeOut.value - elapsed);
remainingTimeOut.value = newRemainingTime;
if (newRemainingTime > 0) {
timeoutId.value = window.setTimeout(() => {
onRemoveSnackbar();
}, newRemainingTime);
} else {
onRemoveSnackbar();
}
pausedAt.value = null;
isPaused.value = false;
}
}
function pauseSuccessTimer() {
if (successTimeoutId.value && !isSuccessPaused.value) {
window.clearTimeout(successTimeoutId.value);
successTimeoutId.value = void 0;
successPausedAt.value = Date.now();
isSuccessPaused.value = true;
}
}
function resumeSuccessTimer() {
if (isSuccessPaused.value && successPausedAt.value) {
const elapsed = Date.now() - successPausedAt.value;
const newRemainingTime = Math.max(0, 2e3 - elapsed);
if (newRemainingTime > 0) {
successTimeoutId.value = window.setTimeout(() => {
onRemoveSnackbar();
}, newRemainingTime);
} else {
onRemoveSnackbar();
}
successPausedAt.value = null;
isSuccessPaused.value = false;
}
}
function onRemoveSnackbar() {
removed.value = true;
offsetBeforeRemove.value = offset.value;
setTimeout(() => {
emit("remove-snackbar", props.snackbar);
}, 500);
}
onMounted(() => {
mounted.value = true;
if (snackbarEl.value) {
snackbarEl.value.focus();
}
});
onBeforeUnmount(() => {
if (timeoutId.value) {
window.clearTimeout(timeoutId.value);
}
if (successTimeoutId.value) {
window.clearTimeout(successTimeoutId.value);
}
isPaused.value = false;
isSuccessPaused.value = false;
pausedAt.value = null;
successPausedAt.value = null;
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "snackbarEl",
ref: snackbarEl,
class: normalizeClass(["mt-snackbar-notification", classes.value]),
role: role.value,
"aria-live": ariaLive.value,
tabindex: "0",
"data-mounted": mounted.value,
"data-removed": removed.value,
style: normalizeStyle({
"--offset": `${removed.value ? offsetBeforeRemove.value : offset.value}px`
})
}, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
icon.value || unref(snackbar).variant === "progress" ? (openBlock(), createElementBlock("div", _hoisted_4, [
isUploading.value ? (openBlock(), createBlock(MtLoader, {
key: 0,
class: "mt-snackbar-notification__loader",
size: "16px"
})) : icon.value ? (openBlock(), createBlock(_sfc_main$1, {
key: 1,
class: "mt-snackbar-notification__icon",
name: icon.value,
size: "16px"
}, null, 8, ["name"])) : createCommentVNode("", true)
])) : createCommentVNode("", true),
createVNode(MtText, {
class: "mt-snackbar-notification__message",
color: "color-text-primary-default",
weight: "medium",
size: "xs"
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(displayMessage.value), 1)
]),
_: 1
}),
isUploading.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
createElementVNode("span", null, toDisplayString(progressPercentage.value), 1)
])) : createCommentVNode("", true)
]),
unref(snackbar).link ? (openBlock(), createBlock(MtLink, {
key: 0,
class: "mt-snackbar-notification__link",
as: "a",
variant: "primary",
to: unref(snackbar).link.url
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(snackbar).link.text), 1)
]),
_: 1
}, 8, ["to"])) : createCommentVNode("", true)
])
], 14, _hoisted_1);
};
}
});
const mtSnackbarNotification_vue_vue_type_style_index_0_scoped_fd922274_lang = "";
const MtSnackbarNotification = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fd922274"]]);
export {
MtSnackbarNotification as default
};
//# sourceMappingURL=MtSnackbarNotification.js.map