@shopware-ag/meteor-component-library/dist/mt-snackbar-9786f84c.mjs

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';
import { ref, readonly, reactive, defineComponent, openBlock, createBlock, Teleport, createElementVNode, createElementBlock, Fragment, renderList, unref } from "vue";
import MtSnackbarNotification from "./esm/MtSnackbarNotification.js";
import { c as createId } from "./id-1e5b8276.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.mjs";
const globalSnackbars = ref([]);
function useSnackbar() {
  function addSnackbar(snackbarData) {
    const snackbar = reactive({
      id: createId(),
      duration: 5e3,
      ...snackbarData
    });
    globalSnackbars.value.push(snackbar);
    return snackbar;
  }
  function removeSnackbar(id) {
    const index = globalSnackbars.value.findIndex((s) => s.id === id);
    if (index > -1) {
      globalSnackbars.value.splice(index, 1);
    }
  }
  function clearSnackbars() {
    globalSnackbars.value = [];
  }
  return {
    snackbars: readonly(globalSnackbars),
    addSnackbar,
    removeSnackbar,
    clearSnackbars
  };
}
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "mt-snackbar",
  setup(__props) {
    const { snackbars, removeSnackbar } = useSnackbar();
    const heights = ref([]);
    const isHovered = 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 openBlock(), createBlock(Teleport, { to: "body" }, [
        createElementVNode("div", {
          class: "mt-snackbar",
          onMouseenter: _cache[0] || (_cache[0] = ($event) => isHovered.value = true),
          onMouseleave: _cache[1] || (_cache[1] = ($event) => isHovered.value = false)
        }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(snackbars), (snackbar) => {
            return openBlock(), 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__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6e328437"]]);
export {
  mtSnackbar as m,
  useSnackbar as u
};
//# sourceMappingURL=mt-snackbar-9786f84c.mjs.map