'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var index = require('../../svg-icon/index.js');

"use strict";
const __default__ = vue.defineComponent({
  name: "me-overlay"
});
var script = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: /* @__PURE__ */ vue.mergeModels({
    center: { type: Boolean, required: false, default: true },
    top: { type: String, required: false, default: "0px" },
    background: { type: String, required: false, default: "rgba(0, 0, 0, 0.7)" },
    appendToBody: { type: Boolean, required: false, default: false },
    showClose: { type: Boolean, required: false, default: true },
    escClose: { type: Boolean, required: false, default: true }
  }, {
    "modelValue": { type: Boolean, default: false },
    "modelModifiers": {}
  }),
  emits: /* @__PURE__ */ vue.mergeModels(["close"], ["update:modelValue"]),
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const show = vue.useModel(__props, "modelValue");
    const keyboardEvent = (e) => {
      if (props.escClose) {
        if (e.key === "Escape") {
          show.value = false;
        }
      }
    };
    vue.watch(
      () => show.value,
      (val) => {
        if (val) {
          document.body.style.overflow = "hidden";
          document.addEventListener("keyup", keyboardEvent);
        } else {
          document.body.style.overflow = "auto";
          document.removeEventListener("keyup", keyboardEvent);
          emits("close");
        }
      }
    );
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: "me-overlay",
          onKeyup: _cache[1] || (_cache[1] = vue.withKeys(($event) => show.value = false, ["esc"]))
        },
        [
          (vue.openBlock(), vue.createBlock(vue.Teleport, {
            to: "body",
            disabled: !__props.appendToBody
          }, [
            vue.createVNode(vue.Transition, { name: "fade" }, {
              default: vue.withCtx(() => [
                show.value ? (vue.openBlock(), vue.createElementBlock(
                  "div",
                  vue.mergeProps({ key: 0 }, _ctx.$attrs, {
                    class: "maskLayer-overlay",
                    style: { background: __props.background }
                  }),
                  [
                    vue.createElementVNode(
                      "div",
                      {
                        class: "maskLayer-content",
                        style: vue.normalizeStyle({
                          marginTop: props.center ? 0 : props.top,
                          alignItems: props.center ? "center" : "stretch"
                        })
                      },
                      [
                        __props.showClose ? (vue.openBlock(), vue.createElementBlock("div", {
                          key: 0,
                          class: "close",
                          onClick: _cache[0] || (_cache[0] = ($event) => show.value = false)
                        }, [
                          vue.createVNode(vue.unref(index.MeSvgIcon), {
                            color: "#fff",
                            name: "ri-close-large-line"
                          })
                        ])) : vue.createCommentVNode("v-if", true),
                        vue.renderSlot(_ctx.$slots, "default")
                      ],
                      4
                      /* STYLE */
                    )
                  ],
                  16
                  /* FULL_PROPS */
                )) : vue.createCommentVNode("v-if", true)
              ]),
              _: 3
              /* FORWARDED */
            })
          ], 8, ["disabled"]))
        ],
        32
        /* NEED_HYDRATION */
      );
    };
  }
});

exports.default = script;
//# sourceMappingURL=overlay.vue2.js.map
