maz-ui 3.47.2-beta.9 → 3.48.1-beta.0

package/components/chunks/MazDialogPromise-Bg3ZOsEI.mjs

@@ -0,0 +1,551 @@
+import { defineComponent as K, ref as M, onMounted as R, watch as H, nextTick as N, openBlock as v, createBlock as A, Teleport as Y, createVNode as Z, Transition as x, withCtx as E, createElementBlock as L, mergeProps as T, createElementVNode as j, normalizeClass as W, withModifiers as _, renderSlot as k, createCommentVNode as z, defineAsyncComponent as F, useAttrs as ee, computed as D, useSlots as te, createTextVNode as S, toDisplayString as V, unref as p, Fragment as U, renderList as oe } from "vue";
+import '../assets/MazDialogPromise.css';const ne = {
+  role: "dialog",
+  class: "m-backdrop-container",
+  "aria-modal": "true"
+}, ae = { class: "m-backdrop-wrapper" }, X = "--backdrop-present", le = /* @__PURE__ */ K({
+  inheritAttrs: !1,
+  __name: "MazBackdrop",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    teleportSelector: { default: "body" },
+    beforeClose: { type: Function, default: void 0 },
+    persistent: { type: Boolean, default: !1 },
+    noCloseOnEscKey: { type: Boolean, default: !1 },
+    transitionName: { default: "backdrop-anim" },
+    backdropClass: { default: () => {
+    } },
+    backdropContentClass: { default: () => {
+    } },
+    contentPadding: { type: Boolean, default: !1 },
+    justify: { default: "none" },
+    align: { default: "none" },
+    variant: {}
+  },
+  emits: ["open", "close", "update:model-value", "before-close"],
+  setup(s, { expose: l, emit: n }) {
+    const d = n;
+    function y() {
+      document.documentElement.classList.add(X);
+    }
+    function g() {
+      document.querySelector(".m-backdrop.--present") || document.documentElement.classList.remove(X);
+    }
+    const m = M(s.modelValue);
+    function f() {
+      w(!1);
+    }
+    async function w(e) {
+      var r;
+      e || (d("before-close"), await ((r = s.beforeClose) == null ? void 0 : r.call(s))), m.value = e;
+    }
+    function $() {
+      d("open");
+    }
+    function C() {
+      d("update:model-value", !1), d("close"), i();
+    }
+    function h() {
+      s.persistent || f();
+    }
+    function c(e) {
+      !s.noCloseOnEscKey && e.key === "Escape" && !s.persistent && f();
+    }
+    function o() {
+      y(), document.addEventListener("keyup", c, !1);
+    }
+    function i() {
+      document.removeEventListener("keyup", c), g();
+    }
+    R(() => {
+      s.modelValue ? o() : i();
+    });
+    let u = null;
+    function t(e) {
+      const r = document.querySelector(e), B = r && Array.from(r.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select')), b = B == null ? void 0 : B.filter((q) => {
+        const I = window.getComputedStyle(q);
+        return I.display !== "none" && I.visibility !== "hidden" && !q.disabled;
+      });
+      return b && b.length > 0 ? b[0] : null;
+    }
+    return H(
+      () => s.modelValue,
+      async (e) => {
+        if (m.value = e, e) {
+          o(), u = document.activeElement, await N();
+          const r = t(".m-backdrop-content");
+          r == null || r.focus();
+        } else
+          i(), await N(), u == null || u.focus();
+      }
+    ), l({
+      onBackdropAnimationEnter: $,
+      onBackdropAnimationLeave: C,
+      onBackdropClicked: h,
+      close: f,
+      present: m,
+      toggleModal: w,
+      onKeyPress: c
+    }), (e, r) => (v(), A(Y, { to: e.teleportSelector }, [
+      Z(x, {
+        appear: "",
+        name: e.transitionName,
+        onAfterEnter: $,
+        onAfterLeave: C
+      }, {
+        default: E(() => [
+          m.value ? (v(), L(
+            "div",
+            T({
+              key: 0,
+              class: "m-backdrop --present m-reset-css"
+            }, e.$attrs, {
+              class: [e.backdropClass, e.variant && `--variant-${e.variant}`, { "--persistent": e.persistent }]
+            }),
+            [
+              j("div", ne, [
+                j("div", ae, [
+                  j(
+                    "div",
+                    {
+                      class: W(["m-backdrop-content", [e.backdropContentClass, `--justify-${e.justify}`, `--align-${e.align}`, { "--padding": e.contentPadding }]]),
+                      role: "button",
+                      tabindex: "-1",
+                      onClick: _(h, ["self"])
+                    },
+                    [
+                      k(e.$slots, "default", {
+                        close: f,
+                        onBackdropClicked: h
+                      }, void 0, !0)
+                    ],
+                    2
+                    /* CLASS */
+                  )
+                ])
+              ])
+            ],
+            16
+            /* FULL_PROPS */
+          )) : z("v-if", !0)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["name"])
+    ], 8, ["to"]));
+  }
+}), J = (s, l) => {
+  const n = s.__vccOpts || s;
+  for (const [d, y] of l)
+    n[d] = y;
+  return n;
+}, se = /* @__PURE__ */ J(le, [["__scopeId", "data-v-90448c91"]]), ie = {
+  key: 0,
+  id: "dialogTitle",
+  class: "m-dialog-title"
+}, re = {
+  key: 0,
+  class: "m-dialog-footer"
+}, de = /* @__PURE__ */ K({
+  name: "MazDialog",
+  inheritAttrs: !1,
+  __name: "MazDialog",
+  props: {
+    modelValue: { type: Boolean },
+    title: { default: void 0 },
+    noClose: { type: Boolean, default: !1 },
+    maxWidth: { default: "100%" },
+    minWidth: { default: "32rem" },
+    scrollable: { type: Boolean, default: !1 },
+    persistent: { type: Boolean, default: !1 },
+    teleportSelector: {},
+    beforeClose: {},
+    noCloseOnEscKey: { type: Boolean },
+    transitionName: {},
+    backdropClass: {},
+    backdropContentClass: {},
+    contentPadding: { type: Boolean },
+    justify: {},
+    align: {},
+    variant: {}
+  },
+  emits: ["open", "close", "update:model-value"],
+  setup(s, { expose: l }) {
+    const n = s, d = F(() => import("./MazBtn-Bje1xDu3.mjs")), y = F(() => import("./x-mark-CnZwVvA7.mjs")), g = ee(), m = M();
+    l({
+      close: () => {
+        var o, i;
+        return (i = (o = m.value) == null ? void 0 : o.close) == null ? void 0 : i.call(o);
+      }
+    });
+    const f = D(() => {
+      const o = [
+        "modelValue",
+        "title",
+        "noClose",
+        "maxWidth",
+        "minWidth",
+        "scrollable"
+      ];
+      return Object.fromEntries(
+        Object.entries(n).filter(([i]) => !o.includes(i))
+      );
+    }), w = D(() => ({
+      ...g,
+      class: void 0,
+      style: void 0
+    })), $ = D(() => ({
+      class: g.class,
+      style: g.style
+    })), C = M(), h = te(), c = D(() => !!h.footer);
+    return n.scrollable && H(() => n.modelValue, async (o) => {
+      await N(), o && C.value && setTimeout(() => {
+        var i;
+        (i = C.value) == null || i.scrollTo({ top: 0, behavior: "instant" });
+      }, 0);
+    }), (o, i) => (v(), A(se, T({ ...w.value, ...f.value }, {
+      ref_key: "backdrop",
+      ref: m,
+      "model-value": o.modelValue,
+      "transition-name": "modal-anim",
+      "aria-labelledby": "dialogTitle",
+      "aria-describedby": "dialogDesc",
+      "content-padding": "",
+      justify: "center",
+      variant: "dialog",
+      onClose: i[0] || (i[0] = (u) => o.$emit("close", u)),
+      onOpen: i[1] || (i[1] = (u) => o.$emit("open", u)),
+      "onUpdate:modelValue": i[2] || (i[2] = (u) => o.$emit("update:model-value", u))
+    }), {
+      default: E(({ close: u, onBackdropClicked: t }) => [
+        j(
+          "div",
+          T({
+            class: ["m-dialog", { "--scrollable": o.scrollable }],
+            role: "dialog",
+            "aria-modal": "true",
+            style: [{ "--max-width": o.maxWidth, "--min-width": o.minWidth }]
+          }, $.value),
+          [
+            k(o.$slots, "header", {
+              close: u,
+              onBackdropClicked: t
+            }, () => [
+              j(
+                "div",
+                {
+                  class: W(["m-dialog-header", { "--has-title": o.$slots.title || o.title }])
+                },
+                [
+                  o.$slots.title || o.title ? (v(), L("h2", ie, [
+                    k(o.$slots, "title", {}, () => [
+                      S(
+                        V(o.title),
+                        1
+                        /* TEXT */
+                      )
+                    ], !0)
+                  ])) : z("v-if", !0),
+                  !o.noClose && !o.persistent ? (v(), A(p(d), {
+                    key: 1,
+                    color: "transparent",
+                    size: "sm",
+                    icon: p(y),
+                    onClick: u
+                  }, null, 8, ["icon", "onClick"])) : z("v-if", !0)
+                ],
+                2
+                /* CLASS */
+              )
+            ], !0),
+            j(
+              "div",
+              {
+                id: "dialogDesc",
+                ref_key: "dialogContent",
+                ref: C,
+                class: W(["m-dialog-content", { "--bottom-padding": !c.value }])
+              },
+              [
+                k(o.$slots, "default", {
+                  close: u,
+                  onBackdropClicked: t
+                }, void 0, !0)
+              ],
+              2
+              /* CLASS */
+            ),
+            c.value ? (v(), L("div", re, [
+              k(o.$slots, "footer", {
+                close: u,
+                onBackdropClicked: t
+              }, void 0, !0)
+            ])) : z("v-if", !0)
+          ],
+          16
+          /* FULL_PROPS */
+        )
+      ]),
+      _: 3
+      /* FORWARDED */
+    }, 16, ["model-value"]));
+  }
+}), ue = /* @__PURE__ */ J(de, [["__scopeId", "data-v-b8a6c7fb"]]), P = {
+  cancelText: "Cancel",
+  confirmText: "Confirm",
+  cancelButton: {
+    text: "Cancel",
+    color: "danger"
+  },
+  confirmButton: {
+    text: "Confirm",
+    color: "success"
+  }
+}, ce = M(P), O = M([]);
+function me(s, l) {
+  return new Promise((n, d) => {
+    O.value = [
+      ...O.value,
+      {
+        id: s,
+        isActive: !0,
+        resolve: async (y) => {
+          n(y), await (l == null ? void 0 : l());
+        },
+        reject: async (y) => {
+          d(y), await (l == null ? void 0 : l());
+        }
+      }
+    ];
+  });
+}
+function Q(s) {
+  return O.value = O.value.filter(({ id: l }) => l !== s), O.value;
+}
+function G(s, l, n) {
+  var d;
+  l && ((d = l[s]) == null || d.call(l, n), l.isActive = !1, setTimeout(() => {
+    Q(l.id);
+  }, 500));
+}
+function fe() {
+  return {
+    data: ce,
+    dialogState: O,
+    showDialogAndWaitChoice: me,
+    removeDialogFromState: Q,
+    rejectDialog: async (s, l = new Error("cancel"), n) => (await (n == null ? void 0 : n()), G("reject", s, l)),
+    resolveDialog: async (s, l = "accept", n) => (await (n == null ? void 0 : n()), G("resolve", s, l))
+  };
+}
+const pe = { class: "maz-flex maz-items-center maz-gap-2" }, ye = /* @__PURE__ */ K({
+  __name: "MazDialogPromise",
+  props: {
+    data: { default: void 0 },
+    message: { default: void 0 },
+    identifier: { default: void 0 },
+    buttons: { default: void 0 },
+    modelValue: { type: Boolean },
+    title: {},
+    noClose: { type: Boolean },
+    maxWidth: {},
+    minWidth: {},
+    scrollable: { type: Boolean },
+    persistent: { type: Boolean },
+    teleportSelector: {},
+    beforeClose: {},
+    noCloseOnEscKey: { type: Boolean },
+    transitionName: {},
+    backdropClass: {},
+    backdropContentClass: {},
+    contentPadding: { type: Boolean },
+    justify: {},
+    align: {},
+    variant: {},
+    cancelText: {},
+    cancelButton: { type: [Boolean, Object] },
+    confirmText: {},
+    confirmButton: { type: [Boolean, Object] }
+  },
+  emits: ["open", "close"],
+  setup(s, { expose: l }) {
+    const n = s, d = F(() => import("./MazBtn-Bje1xDu3.mjs")), { dialogState: y, rejectDialog: g, resolveDialog: m, data: f } = fe(), w = D(() => {
+      var t;
+      return n.buttons ?? ((t = n.data) == null ? void 0 : t.buttons) ?? f.value.buttons;
+    }), $ = D(() => ({
+      ...P,
+      ...f.value,
+      ...n.data
+    })), C = D(() => {
+      var r, a, B, b;
+      if (!(((r = f.value) == null ? void 0 : r.cancelButton) ?? ((a = n.data) == null ? void 0 : a.cancelButton) ?? P.cancelButton))
+        return;
+      const e = {
+        ...P.cancelButton,
+        ...(B = f.value) == null ? void 0 : B.cancelButton,
+        ...(b = n.data) == null ? void 0 : b.cancelButton
+      };
+      return {
+        ...e,
+        text: n.cancelText || $.value.cancelText || e.text
+      };
+    }), h = D(() => {
+      var r, a, B, b;
+      if (!(((r = f.value) == null ? void 0 : r.confirmButton) ?? ((a = n.data) == null ? void 0 : a.confirmButton) ?? P.confirmButton))
+        return;
+      const e = {
+        ...P.confirmButton,
+        ...(B = f.value) == null ? void 0 : B.confirmButton,
+        ...(b = n.data) == null ? void 0 : b.confirmButton
+      };
+      return {
+        ...e,
+        text: n.confirmText || $.value.confirmText || e.text
+      };
+    }), c = D(
+      () => y.value.find(({ id: t }) => t === n.identifier)
+    ), o = M();
+    l({
+      close: () => {
+        var t, e;
+        return (e = (t = o.value) == null ? void 0 : t.close) == null ? void 0 : e.call(t);
+      }
+    });
+    function i(t) {
+      return "type" in t && (t.type === "resolve" || t.type === "reject");
+    }
+    function u(t, e) {
+      return i(e) ? e.type === "resolve" ? m(t, e.response) : g(t, e.response) : m(t, void 0, e.action);
+    }
+    return (t, e) => {
+      var r;
+      return v(), A(ue, T({
+        ref_key: "dialog",
+        ref: o
+      }, { ...t.$attrs, ...n }, {
+        "model-value": ((r = c.value) == null ? void 0 : r.isActive) ?? t.modelValue ?? !1,
+        onClose: e[2] || (e[2] = (a) => t.$emit("close", a)),
+        onOpen: e[3] || (e[3] = (a) => t.$emit("open", a)),
+        "onUpdate:modelValue": e[4] || (e[4] = (a) => p(g)(c.value))
+      }), {
+        title: E(() => [
+          k(t.$slots, "title", {}, () => {
+            var a;
+            return [
+              S(
+                V(t.title || ((a = $.value) == null ? void 0 : a.title)),
+                1
+                /* TEXT */
+              )
+            ];
+          })
+        ]),
+        default: E(() => [
+          k(t.$slots, "default", {
+            resolve: (a) => p(m)(c.value, a),
+            reject: (a) => p(g)(c.value, a)
+          }, () => {
+            var a;
+            return [
+              S(
+                V(t.message || ((a = $.value) == null ? void 0 : a.message)),
+                1
+                /* TEXT */
+              )
+            ];
+          })
+        ]),
+        footer: E(() => [
+          k(t.$slots, "footer-button", {
+            resolve: (a) => p(m)(c.value, a),
+            reject: (a) => p(g)(c.value, a)
+          }, () => [
+            j("div", pe, [
+              w.value ? (v(!0), L(
+                U,
+                { key: 0 },
+                oe(w.value, (a, B) => (v(), A(p(d), T({
+                  key: B,
+                  ref_for: !0
+                }, {
+                  ...a,
+                  type: "button"
+                }, {
+                  onClick: (b) => u(c.value, a)
+                }), {
+                  default: E(() => [
+                    S(
+                      V(a.text),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1040, ["onClick"]))),
+                128
+                /* KEYED_FRAGMENT */
+              )) : (v(), L(
+                U,
+                { key: 1 },
+                [
+                  C.value ? (v(), A(
+                    p(d),
+                    T({ key: 0 }, C.value, {
+                      onClick: e[0] || (e[0] = (a) => p(g)(c.value))
+                    }),
+                    {
+                      default: E(() => [
+                        k(t.$slots, "cancel-text", {}, () => [
+                          S(
+                            V(C.value.text),
+                            1
+                            /* TEXT */
+                          )
+                        ])
+                      ]),
+                      _: 3
+                      /* FORWARDED */
+                    },
+                    16
+                    /* FULL_PROPS */
+                  )) : z("v-if", !0),
+                  h.value ? (v(), A(
+                    p(d),
+                    T({ key: 1 }, h.value, {
+                      onClick: e[1] || (e[1] = (a) => p(m)(c.value))
+                    }),
+                    {
+                      default: E(() => [
+                        k(t.$slots, "confirm-text", {}, () => [
+                          S(
+                            V(h.value.text),
+                            1
+                            /* TEXT */
+                          )
+                        ])
+                      ]),
+                      _: 3
+                      /* FORWARDED */
+                    },
+                    16
+                    /* FULL_PROPS */
+                  )) : z("v-if", !0)
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              ))
+            ])
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["model-value"]);
+    };
+  }
+});
+export {
+  J as _,
+  ye as a,
+  fe as u
+};