import { defineComponent as A, ref as v, watch as y, watchEffect as M, onMounted as V, onUnmounted as g, openBlock as k, createBlock as O, Teleport as P, createElementVNode as i, normalizeStyle as C, unref as o, normalizeClass as c, createVNode as b, Transition as h, withCtx as B, createElementBlock as T, renderSlot as w, createCommentVNode as u } from "vue";
import "../config-provider/index.mjs";
import "../hooks/index.mjs";
import U from "./style/index.mjs";
import { getMaskZIndex as $, lockScrollable as j } from "./utils.mjs";
import { useNamespace as D } from "../config-provider/hooks/use-namespace.mjs";
import { useControllableValue as Z } from "../hooks/useControllableValue.mjs";
const Q = /* @__PURE__ */ A({
  name: "ApMask",
  __name: "index",
  props: {
    open: { type: Boolean },
    "onUpdate:open": {},
    deleteOnClose: { type: Boolean },
    closable: { type: Boolean, default: !0 },
    disabled: { type: Boolean },
    onBeforeClose: {},
    contentStyle: { type: [Boolean, null, String, Object, Array] },
    zIndex: {},
    escClosable: { type: Boolean, default: !0 }
  },
  emits: ["update:open"],
  setup(l, { emit: E }) {
    const t = l, { b: r, e: m, em: S } = D("mask"), z = U("mask"), I = E, x = t.zIndex || $(), { value: a, updateValue: d } = Z(
      t,
      I,
      {
        valuePropName: "open"
      }
    ), s = v(t.open);
    y(
      () => a.value,
      (e) => {
        e && (s.value = e);
      }
    );
    const f = v();
    y(f, (e) => {
      e && e.addEventListener("wheel", (n) => {
        n.stopPropagation(), n.preventDefault();
      });
    }), M((e) => {
      if (!a.value)
        return;
      const n = j();
      e(() => {
        n?.();
      });
    }), V(() => {
      document.addEventListener("keydown", p);
    }), g(() => {
      document.removeEventListener("keydown", p);
    });
    function L() {
      s.value = !1;
    }
    async function N() {
      if (t.closable) {
        if (t.onBeforeClose) {
          await t.onBeforeClose() && d(!1);
          return;
        }
        d(!1);
      }
    }
    function p(e) {
      !a.value || !(t.closable && t.escClosable) || e.key === "Escape" && d(!1);
    }
    return (e, n) => !l.deleteOnClose || s.value ? (k(), O(P, {
      key: 0,
      to: "body"
    }, [
      i("div", {
        ref_key: "wrapper",
        ref: f,
        class: c([o(r)(), o(z)]),
        style: C({ zIndex: o(x), visibility: s.value ? void 0 : "hidden" })
      }, [
        b(h, {
          appear: "",
          name: o(r)("fade"),
          onAfterLeave: L
        }, {
          default: B(() => [
            o(a) ? (k(), T("div", {
              key: 0,
              class: c([o(m)("mask"), { [o(S)("mask", "disabled")]: l.disabled }]),
              onClick: N
            }, [
              w(e.$slots, "mask", {}, () => [
                i("div", {
                  class: c(o(m)("mask-inner"))
                }, null, 2)
              ])
            ], 2)) : u("", !0)
          ]),
          _: 3
        }, 8, ["name"]),
        i("div", {
          style: C(l.contentStyle)
        }, [
          b(h, {
            appear: "",
            name: o(r)("fade")
          }, {
            default: B(() => [
              o(a) ? w(e.$slots, "default", { key: 0 }) : u("", !0)
            ]),
            _: 3
          }, 8, ["name"])
        ], 4)
      ], 6)
    ])) : u("", !0);
  }
});
export {
  Q as default
};
