maz-ui 3.47.2-beta.2 → 3.47.2-beta.21

package/components/chunks/MazDialogPromise-DOnmLhui.mjs

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