import { defineComponent as Z, useSlots as z, useAttrs as H, useCssModule as L, ref as B, computed as s, watchEffect as q, nextTick as F, openBlock as l, createBlock as f, Transition as G, withCtx as m, createElementBlock as p, mergeProps as O, unref as e, withKeys as P, createElementVNode as a, normalizeClass as o, createCommentVNode as i, toDisplayString as _, renderSlot as U, createTextVNode as S, createVNode as X } from "vue";
import { capitalize as y } from "es-toolkit";
import { uniqueId as Y } from "es-toolkit/compat";
import { S as w, b as g, a as I } from "./statusLevels-D8EgtE_L.js";
import { t as d } from "./locale.js";
import D from "./Button.js";
import j from "./Icon.js";
import { _ as J } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Q = ["open", "aria-labelledby", "data-test"], R = ["id"], W = {
  key: 0,
  class: "mb-0"
}, tt = ["innerHTML"], et = { class: "text-right" }, ot = /* @__PURE__ */ Z({
  name: "ll-dialog",
  inheritAttrs: !1,
  __name: "Dialog",
  props: {
    open: { type: Boolean, default: !1 },
    disabled: { type: Boolean, default: !1 },
    dangerZone: { type: Boolean, default: !1 },
    header: { default: d("ll.areYouSure") },
    description: { default: "" },
    cancelText: { default: d("ll.cancel") },
    confirmText: { default: "" },
    onConfirm: { type: Function, default: () => {
    } },
    alert: { type: Boolean, default: !1 },
    status: { default: void 0 }
  },
  emits: ["update:open", "cancel"],
  setup(M, { emit: N }) {
    const t = M, b = N, h = z(), v = H(), n = L(), x = Y("dialog-header-"), r = B(!1), c = B(), E = s(() => t.confirmText || (t.alert ? d("ll.okay") : d("ll.confirm"))), C = s(() => !!h.default || t.description), V = s(
      () => t.status ? w[y(t.status)] : w.Info
    ), $ = s(
      () => t.status ? g[y(t.status)] : g.Info
    ), k = s(
      () => t.status ? I[y(t.status)] : I.Info
    ), A = s(() => t.dangerZone || t.status === g.Error);
    function T() {
      b("update:open", !1), b("cancel");
    }
    async function K(u) {
      if (!r.value) {
        r.value = !0;
        try {
          await t.onConfirm(u);
        } finally {
          r.value = !1;
        }
      }
    }
    return q(() => {
      t.open && c.value && F(function() {
        c.value.focus();
      });
    }), (u, ct) => (l(), f(G, { name: "fade" }, {
      default: m(() => [
        t.open ? (l(), p("dialog", O({
          key: 0,
          ref_key: "root",
          ref: c,
          open: t.open,
          tabindex: "0",
          "aria-labelledby": e(x),
          "aria-modal": "true",
          class: ["stash-dialog", e(n).dialog],
          "data-test": e(v)["data-test"] || "ll-dialog"
        }, e(v), {
          onKeydown: P(T, ["esc"])
        }), [
          a("div", {
            class: o(["stash-dialog__body", [
              e(n).body,
              `border-${k.value}`,
              {
                "border-t-6": t.status
              }
            ]]),
            "data-test": "stash-dialog|body"
          }, [
            a("div", {
              class: o(["stash-dialog__body__content", e(n).content]),
              "data-test": "stash-dialog|body-content"
            }, [
              a("div", {
                class: o(["flex items-start", C.value && "mb-1.5"])
              }, [
                t.status ? (l(), f(j, {
                  key: 0,
                  "data-test": "dialog-status-icon",
                  name: V.value,
                  title: $.value,
                  class: o(`text-${k.value}`)
                }, null, 8, ["name", "title", "class"])) : i("", !0),
                a("h3", {
                  id: e(x),
                  class: o({ "ml-1.5 mt-px": t.status })
                }, _(t.header), 11, R)
              ], 2),
              C.value ? (l(), p("p", W, [
                e(h).default ? U(u.$slots, "default", { key: 0 }) : (l(), p("span", {
                  key: 1,
                  innerHTML: t.description
                }, null, 8, tt))
              ])) : i("", !0)
            ], 2),
            a("footer", {
              class: o(["stash-dialog__footer", e(n).footer]),
              "data-test": "stash-dialog|footer"
            }, [
              a("div", et, [
                a("div", {
                  class: o({ "button-grid": !t.alert })
                }, [
                  t.alert ? i("", !0) : (l(), f(D, {
                    key: 0,
                    "data-test": "button|cancel",
                    secondary: "",
                    onClick: T
                  }, {
                    default: m(() => [
                      S(_(t.cancelText), 1)
                    ]),
                    _: 1
                  })),
                  X(D, {
                    "data-test": "button|confirm",
                    disabled: t.disabled,
                    "is-loading": r.value,
                    color: A.value ? "red" : "blue",
                    class: o({
                      "w-full": t.alert
                    }),
                    onClick: K
                  }, {
                    default: m(() => [
                      S(_(E.value), 1)
                    ]),
                    _: 1
                  }, 8, ["disabled", "is-loading", "color", "class"])
                ], 2)
              ])
            ], 2)
          ], 2)
        ], 16, Q)) : i("", !0)
      ]),
      _: 3
    }));
  }
}), at = "_dialog__pwiN", st = "_body_UCXwO", lt = "_grey_p9a6u", nt = "_content_Km4Ag", rt = "_footer_pBaGv", it = {
  dialog: at,
  body: st,
  grey: lt,
  content: nt,
  footer: rt
}, dt = {
  $style: it
}, ht = /* @__PURE__ */ J(ot, [["__cssModules", dt]]);
export {
  ht as default
};
//# sourceMappingURL=Dialog.js.map
