@shopware-ag/meteor-component-library/dist/mt-snackbar-7b6aae13.js

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

import './mt-snackbar.css';
"use strict";
const vue = require("vue");
const MtSnackbarNotification = require("./common/MtSnackbarNotification.js");
const id = require("./id-8e80f112.js");
const _pluginVue_exportHelper = require("./_plugin-vue_export-helper-9c783a34.js");
const globalSnackbars = vue.ref([]);
function useSnackbar() {
  function addSnackbar(snackbarData) {
    const snackbar = vue.reactive({
      id: id.createId(),
      duration: 5e3,
      ...snackbarData
    });
    globalSnackbars.value.push(snackbar);
    return snackbar;
  }
  function removeSnackbar(id2) {
    const index = globalSnackbars.value.findIndex((s) => s.id === id2);
    if (index > -1) {
      globalSnackbars.value.splice(index, 1);
    }
  }
  function clearSnackbars() {
    globalSnackbars.value = [];
  }
  return {
    snackbars: vue.readonly(globalSnackbars),
    addSnackbar,
    removeSnackbar,
    clearSnackbars
  };
}
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "mt-snackbar",
  setup(__props) {
    const { snackbars, removeSnackbar } = useSnackbar();
    const heights = vue.ref([]);
    const isHovered = vue.ref(false);
    function updateHeight(h) {
      const index = heights.value.findIndex((item) => item.snackbarId === h.snackbarId);
      if (index !== -1) {
        heights.value[index] = h;
      } else {
        heights.value.unshift(h);
      }
    }
    function removeSnackbarWithHeightCleanup(snackbarToRemove) {
      removeSnackbar(snackbarToRemove.id);
      setTimeout(() => {
        if (!snackbars.value.find((s) => s.id === snackbarToRemove.id)) {
          heights.value = heights.value.filter((h) => h.snackbarId !== snackbarToRemove.id);
        }
      }, 250);
    }
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
        vue.createElementVNode("div", {
          class: "mt-snackbar",
          onMouseenter: _cache[0] || (_cache[0] = ($event) => isHovered.value = true),
          onMouseleave: _cache[1] || (_cache[1] = ($event) => isHovered.value = false)
        }, [
          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(snackbars), (snackbar) => {
            return vue.openBlock(), vue.createBlock(MtSnackbarNotification, {
              key: snackbar.id,
              snackbar,
              "is-hovered": isHovered.value,
              heights: heights.value,
              onRemoveSnackbar: removeSnackbarWithHeightCleanup,
              "onUpdate:height": updateHeight
            }, null, 8, ["snackbar", "is-hovered", "heights"]);
          }), 128))
        ], 32)
      ]);
    };
  }
});
const mtSnackbar_vue_vue_type_style_index_0_scoped_6e328437_lang = "";
const mtSnackbar = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-6e328437"]]);
exports.mtSnackbar = mtSnackbar;
exports.useSnackbar = useSnackbar;
//# sourceMappingURL=mt-snackbar-7b6aae13.js.map