import { defineComponent as D, ref as m, reactive as H, computed as n, onMounted as M, nextTick as f, watch as z, openBlock as V, createElementBlock as j, normalizeClass as u, createVNode as p, Transition as h, withCtx as v, withDirectives as w, createElementVNode as o, normalizeStyle as y, renderSlot as P, vShow as k } from "vue";
import { C as c } from "./base-PQGakkrl.js";
const $ = { class: "modal-content" }, q = { class: "modal-backdrop fade show" }, K = /* @__PURE__ */ D({
  name: "ClModalTransition",
  __name: "BaseTransition",
  props: {
    className: {},
    isBackClick: { type: Boolean },
    width: {},
    classTransitionEnter: {},
    classTransitionLeave: {}
  },
  emits: ["onClickBack"],
  setup(i, { expose: g, emit: T }) {
    const t = i, E = T, a = m(null), _ = m(null), s = H({
      isShow: !1,
      isAlignTop: !1,
      isAlignLeft: !1
    }), C = n(() => {
      const e = {
        "panel-modal": !0
      };
      return c.isEmpty(t.className) || t.className?.split(" ").forEach((l) => {
        c.isEmpty(l) || (e[l] = !0);
      }), e;
    }), B = n(() => ({
      modal: !0,
      fade: !0,
      show: s.isShow
    })), N = n(() => {
      const e = {};
      return s.isAlignTop && (e["align-items"] = "flex-start"), s.isAlignLeft && (e["justify-content"] = "flex-start"), e;
    }), A = n(() => {
      const e = {};
      return c.isEmpty(t.width) || (e.width = t.width), e;
    }), S = () => {
      E("onClickBack");
    }, r = () => {
      s.isShow = !1, document.body.className = document.body.className.replace(" modal-open", "");
    }, d = () => {
      a.value && (s.isAlignTop = a.value.clientHeight > window.innerHeight);
    }, b = () => {
      a.value && (s.isAlignLeft = a.value.clientWidth > window.innerWidth);
    };
    M(() => {
      f(() => {
        d(), b();
      });
    }), z(
      () => s.isShow,
      (e) => {
        e ? (document.body.className.includes("modal-open") || (document.body.className += " modal-open"), f(() => {
          d();
        })) : (document.body.className = document.body.className.replace(" modal-open", ""), s.isAlignTop = !1);
      }
    );
    const L = (e) => {
      t.isBackClick && e.currentTarget === e.target && (r(), S());
    }, x = () => {
    }, W = () => {
    };
    return g({
      show: () => {
        s.isShow = !0;
      },
      hide: () => {
        r();
      }
    }), (e, l) => (V(), j("div", {
      class: u(C.value)
    }, [
      p(h, {
        "enter-active-class": i.classTransitionEnter,
        "leave-active-class": i.classTransitionLeave,
        onEnter: x,
        onAfterLeave: W
      }, {
        default: v(() => [
          w(o("div", {
            class: u(B.value),
            tabindex: "-1"
          }, [
            o("div", {
              ref_key: "refElWrapper",
              ref: _,
              class: "modal-wrapper",
              style: y(N.value),
              onClick: L
            }, [
              o("div", {
                class: "modal-dialog",
                style: y(A.value),
                ref_key: "refElDialog",
                ref: a
              }, [
                o("div", $, [
                  P(e.$slots, "default")
                ])
              ], 4)
            ], 4)
          ], 2), [
            [k, s.isShow]
          ])
        ]),
        _: 3
      }, 8, ["enter-active-class", "leave-active-class"]),
      p(h, { name: "overlay-fade" }, {
        default: v(() => [
          w(o("div", q, null, 512), [
            [k, s.isShow]
          ])
        ]),
        _: 1
      })
    ], 2));
  }
});
export {
  K as _
};
//# sourceMappingURL=BaseTransition.vue_vue_type_script_setup_true_lang-DLAYzSgX.js.map
