@shopware-ag/meteor-component-library/dist/common/MtModalRoot.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-modal-root.css';
"use strict";
const vue = require("vue");
const useModalContext = require("../useModalContext-e62d6d51.js");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "mt-modal-root",
  props: {
    isOpen: { type: Boolean },
    closable: { type: Boolean, default: true }
  },
  emits: ["change"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const isOpen = vue.ref(props.isOpen);
    const closable = vue.ref(props.closable);
    vue.watch(isOpen, () => {
      emit("change", isOpen.value);
    });
    vue.watch(
      () => props.isOpen,
      (value) => {
        isOpen.value = value;
      }
    );
    vue.watch(
      () => props.closable,
      (value) => {
        closable.value = value ?? true;
      }
    );
    function setIsOpen(state) {
      isOpen.value = state;
    }
    vue.provide(useModalContext.DialogContext, {
      isOpen,
      setIsOpen,
      closable
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
        vue.createVNode(vue.Transition, { name: "fade" }, {
          default: vue.withCtx(() => [
            (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
              isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", {
                key: 0,
                class: "mt-modal-root__backdrop",
                "aria-hidden": "",
                "data-testid": "modal-backdrop",
                onClick: _cache[0] || (_cache[0] = () => {
                  if (closable.value)
                    setIsOpen(false);
                })
              })) : vue.createCommentVNode("", true)
            ]))
          ]),
          _: 1
        }),
        vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
      ], 64);
    };
  }
});
const mtModalRoot_vue_vue_type_style_index_0_scoped_e26db296_lang = "";
const MtModalRoot = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-e26db296"]]);
module.exports = MtModalRoot;
//# sourceMappingURL=MtModalRoot.js.map