@shopware-ag/meteor-component-library/dist/esm/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';
import { defineComponent, ref, watch, provide, openBlock, createElementBlock, Fragment, createVNode, Transition, withCtx, createBlock, Teleport, createCommentVNode, renderSlot } from "vue";
import { D as DialogContext } from "../useModalContext-3b7570bc.mjs";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
const _sfc_main = /* @__PURE__ */ 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 = ref(props.isOpen);
    const closable = ref(props.closable);
    watch(isOpen, () => {
      emit("change", isOpen.value);
    });
    watch(
      () => props.isOpen,
      (value) => {
        isOpen.value = value;
      }
    );
    watch(
      () => props.closable,
      (value) => {
        closable.value = value ?? true;
      }
    );
    function setIsOpen(state) {
      isOpen.value = state;
    }
    provide(DialogContext, {
      isOpen,
      setIsOpen,
      closable
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(Fragment, null, [
        createVNode(Transition, { name: "fade" }, {
          default: withCtx(() => [
            (openBlock(), createBlock(Teleport, { to: "body" }, [
              isOpen.value ? (openBlock(), 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);
                })
              })) : createCommentVNode("", true)
            ]))
          ]),
          _: 1
        }),
        renderSlot(_ctx.$slots, "default", {}, void 0, true)
      ], 64);
    };
  }
});
const mtModalRoot_vue_vue_type_style_index_0_scoped_e26db296_lang = "";
const MtModalRoot = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e26db296"]]);
export {
  MtModalRoot as default
};
//# sourceMappingURL=MtModalRoot.js.map