import { defineComponent as B, useSlots as H, ref as x, computed as v, createBlock as p, openBlock as o, Teleport as V, createVNode as w, Transition as b, withCtx as T, createElementBlock as r, createCommentVNode as i, createElementVNode as f, mergeProps as _, withModifiers as $, renderSlot as m, normalizeClass as h } from "vue";
import { useEventListener as E } from "../../composition/useEventListener.js";
/* empty css                     */
import G from "../../utils/PlCloseModalBtn.vue.js";
const O = {
  key: 1,
  class: "pl-dialog-modal__title"
}, z = {
  inheritAttrs: !1
}, A = /* @__PURE__ */ B({
  ...z,
  __name: "PlDialogModal",
  props: {
    modelValue: { type: Boolean },
    width: { default: "448px" },
    height: { default: "auto" },
    minHeight: { default: "auto" },
    maxHeight: { default: "auto" },
    closable: { type: Boolean, default: !0 },
    noContentGutters: { type: Boolean, default: !1 },
    noTopContentGutter: { type: Boolean },
    actionsHasTopBorder: { type: Boolean, default: !0 },
    closeOnOutsideClick: { type: Boolean },
    size: { default: void 0 }
  },
  emits: ["update:modelValue"],
  setup(t, { emit: g }) {
    const a = H(), n = g, s = t, d = x(), y = v(() => {
      const { width: e, height: l, minHeight: c, maxHeight: C, size: u } = s;
      return u === "small" ? {
        width: "448px",
        height: "440px",
        minHeight: "auto",
        maxHeight: "auto"
      } : u === "medium" ? {
        width: "720px",
        height: "720px",
        minHeight: "auto",
        maxHeight: "auto"
      } : u === "large" ? {
        width: "1080px",
        height: "880px",
        minHeight: "auto",
        maxHeight: "auto"
      } : { width: e, height: l, minHeight: c, maxHeight: C };
    });
    function k(e) {
      d.value && s.closeOnOutsideClick && document.contains(e.target) && !d.value.contains(e.target) && n("update:modelValue", !1);
    }
    return E(document.body, "keyup", (e) => {
      s.modelValue && e.code === "Escape" && n("update:modelValue", !1);
    }), (e, l) => (o(), p(V, { to: "body" }, [
      w(b, { name: "dialog" }, {
        default: T(() => [
          t.modelValue ? (o(), r("div", {
            key: 0,
            class: "pl-dialog-modal__shadow",
            onClick: k
          }, [
            f("div", _(e.$attrs, {
              ref_key: "modal",
              ref: d,
              class: ["pl-dialog-modal", { "has-title": a.title, "has-content": a.default }],
              style: y.value
            }), [
              t.closable ? (o(), p(G, {
                key: 0,
                class: "close-modal-btn",
                onClick: l[0] || (l[0] = $((c) => n("update:modelValue", !1), ["stop"]))
              })) : i("", !0),
              a.title ? (o(), r("div", O, [
                m(e.$slots, "title")
              ])) : i("", !0),
              f("div", {
                class: h(["pl-dialog-modal__content", { "no-content-gutters": t.noContentGutters, "no-top-content-gutter": t.noTopContentGutter }])
              }, [
                m(e.$slots, "default")
              ], 2),
              a.actions ? (o(), r("div", {
                key: 2,
                class: h(["pl-dialog-modal__actions", { "has-top-border": t.actionsHasTopBorder }])
              }, [
                m(e.$slots, "actions")
              ], 2)) : i("", !0)
            ], 16)
          ])) : i("", !0)
        ]),
        _: 3
      })
    ]));
  }
});
export {
  A as default
};
//# sourceMappingURL=PlDialogModal.vue.js.map
