import { defineComponent, useModel, watch, openBlock, createElementBlock, withKeys, createBlock, Teleport, createVNode, Transition, withCtx, mergeProps, createElementVNode, normalizeStyle, unref, createCommentVNode, renderSlot, mergeModels } from 'vue';
import { MeSvgIcon } from '../../svg-icon/index.mjs';

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

export { script as default };
//# sourceMappingURL=overlay.vue2.mjs.map
