@aplus-frontend/ui/es/src/mask/index.vue.mjs

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