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

//# sourceMappingURL=PlDialogModal.vue2.js.map