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