import { defineComponent as X, ref as y, watch as w, nextTick as S, useSlots as H, computed as M, openBlock as t, createBlock as v, Teleport as j, createElementBlock as r, normalizeStyle as q, unref as o, normalizeClass as l, createCommentVNode as a, createElementVNode as B, resolveDynamicComponent as K, withCtx as $, renderSlot as i, toDisplayString as h } from "vue";
import { onClickOutside as L, useEventListener as G } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
import { useTheme as J } from "../../composables/useTheme.js";
import { useFocusTrap as Q } from "../../composables/useFocusTrap.js";
import { closeIcon as U } from "../../common/icons.js";
import Y from "../button/Button.vue.js";
import Z from "../scroll/Scroll.vue.js";
import _ from "../form/Form.vue.js";
const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top", "center", "bottom"], te = {
  size: {
    type: String,
    default: "lg"
  },
  position: {
    type: String,
    default: "center"
  },
  modelValue: Boolean,
  showClose: Boolean,
  backdrop: {
    type: Boolean,
    default: !0
  },
  hasActions: {
    type: Boolean,
    default: !0
  },
  hasHeader: {
    type: Boolean,
    default: !0
  },
  title: String,
  description: String,
  label: String,
  loading: Boolean,
  loadingText: String,
  fluid: Boolean,
  // form props
  isForm: Boolean,
  formDisabled: Boolean,
  formDescription: String,
  formTitle: String,
  formAutoValidate: {
    type: Boolean,
    default: !0
  },
  formErrors: {
    type: [Array, Object],
    default: () => []
  },
  persistent: Boolean
}, le = {
  name: "XModal",
  validators: {
    size: ee,
    position: oe
  }
}, me = /* @__PURE__ */ X({
  ...le,
  props: te,
  emits: ["update:modelValue", "submit"],
  setup(V, { expose: C, emit: T }) {
    const d = V, k = T, c = y(d.modelValue), u = y(!1), b = y(null), E = y(null), { initFocusTrap: z, clearFocusTrap: A } = Q();
    let m;
    w(c, (e) => {
      m && (m(), m = void 0), e && setTimeout(() => {
        m = L(b, F, {
          ignore: [".v-popper__popper"]
        });
      });
    }), w(() => d.modelValue, D, { immediate: !0 });
    async function D() {
      const e = d.modelValue;
      if (e) {
        const n = window.innerWidth - document.documentElement.clientWidth;
        c.value = e, await S(), u.value = e, await S(), z(b), document.body.style.paddingRight = `${n}px`, document.body.style.overflow = "hidden";
      } else
        u.value = e, c.value = e, A(), document.body.style.paddingRight = "", document.body.style.overflow = "auto";
    }
    typeof window < "u" && G(document, "keydown", W);
    const R = (e) => [".v-popper__popper", ".x-datepicker"].some((n) => {
      if (typeof n == "string")
        return Array.from(window.document.querySelectorAll(n)).some((f) => f === e.target || e.composedPath().includes(f));
    });
    function W(e) {
      e.key === "Escape" && !R(e) && c.value && !d.persistent && p();
    }
    function F() {
      d.persistent || p();
    }
    function p() {
      u.value = !1, setTimeout(() => {
        k("update:modelValue", !1);
      }, 150);
    }
    function O() {
      k("update:modelValue", !0), u.value = !0;
    }
    const g = H(), P = M(() => !!(g["tertiary-action"] || g["cancel-action"])), { styles: I, classes: s, className: N } = J("Modal", {}, d, {
      visible: u
    });
    return C({ open: O, close: p }), (e, n) => (t(), v(j, { to: "body" }, [
      c.value ? (t(), r("div", {
        key: 0,
        ref_key: "modalWrapperRef",
        ref: E,
        style: q(o(I)),
        class: l([
          o(N),
          o(s).wrapper,
          u.value ? "visible" : "invisible ease-in duration-100"
        ])
      }, [
        e.backdrop ? (t(), r("div", {
          key: 0,
          class: l(o(s).backdrop)
        }, null, 2)) : a("", !0),
        B("div", {
          class: l(o(s).modalWrapper)
        }, [
          (t(), v(K(e.isForm ? _ : "div"), {
            ref_key: "modalRef",
            ref: b,
            class: l(["max-h-full", o(s).modal]),
            disabled: e.formDisabled,
            "auto-validate": e.formAutoValidate,
            title: e.formTitle,
            description: e.formDescription,
            errors: e.formErrors,
            "auto-focus": "",
            "has-footer": !1,
            role: "dialog",
            "aria-modal": "true",
            "aria-labelledby": "modal-headline",
            onSubmit: n[0] || (n[0] = (f) => e.$emit("submit", f))
          }, {
            default: $(() => [
              i(e.$slots, "image"),
              i(e.$slots, "header", {}, () => [
                e.hasHeader ? (t(), r("div", {
                  key: 0,
                  class: l(o(s).header)
                }, [
                  i(e.$slots, "header-content", {}, () => [
                    e.label ? (t(), r("div", {
                      key: 0,
                      class: l(o(s).label)
                    }, h(e.label), 3)) : a("", !0),
                    e.title ? (t(), r("div", {
                      key: 1,
                      class: l(o(s).title)
                    }, h(e.title), 3)) : a("", !0)
                  ])
                ], 2)) : a("", !0)
              ]),
              e.$slots.default ? (t(), v(Z, {
                key: 0,
                scrollbar: !1,
                class: l({
                  "h-full": e.size === "full"
                }),
                vertical: ""
              }, {
                default: $(() => [
                  B("div", {
                    class: l(o(s).content)
                  }, [
                    e.description ? (t(), r("div", {
                      key: 0,
                      class: l(o(s).description)
                    }, h(e.description), 3)) : a("", !0),
                    i(e.$slots, "default")
                  ], 2)
                ]),
                _: 3
              }, 8, ["class"])) : a("", !0),
              e.showClose ? (t(), v(Y, {
                key: 1,
                ghost: "",
                size: "sm",
                tabindex: "-1",
                icon: o(U),
                class: l(o(s).closeIcon),
                onClick: p
              }, null, 8, ["icon", "class"])) : a("", !0),
              i(e.$slots, "footer", {}, () => [
                e.hasActions ? (t(), r("div", {
                  key: 0,
                  class: l(o(s).actions)
                }, [
                  i(e.$slots, "actions", {}, () => [
                    i(e.$slots, "cancel-action"),
                    P.value ? (t(), r("div", x)) : a("", !0),
                    i(e.$slots, "tertiary-action"),
                    i(e.$slots, "secondary-action"),
                    i(e.$slots, "primary-action")
                  ])
                ], 2)) : a("", !0)
              ])
            ]),
            _: 3
          }, 40, ["disabled", "auto-validate", "title", "description", "errors", "class"]))
        ], 2)
      ], 6)) : a("", !0)
    ]));
  }
});
export {
  me as default
};
