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

package/components/chunks/MazDialog-Ca3jJ12T.mjs

@@ -0,0 +1,297 @@
+import { defineComponent as L, ref as A, onMounted as F, watch as N, nextTick as w, openBlock as m, createBlock as V, Teleport as I, createVNode as U, Transition as X, withCtx as j, createElementBlock as D, mergeProps as M, createElementVNode as f, normalizeClass as W, withModifiers as G, renderSlot as b, createCommentVNode as h, defineAsyncComponent as P, useAttrs as H, computed as B, createTextVNode as J, toDisplayString as Q, unref as O } from "vue";
+import '../assets/MazDialog.css';const R = {
+  role: "dialog",
+  class: "m-backdrop-container",
+  "aria-modal": "true"
+}, Y = { class: "m-backdrop-wrapper" }, z = "--backdrop-present", Z = /* @__PURE__ */ L({
+  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(a, { expose: p, emit: s }) {
+    const i = s;
+    function v() {
+      document.documentElement.classList.add(z);
+    }
+    function y() {
+      document.querySelector(".m-backdrop.--present") || document.documentElement.classList.remove(z);
+    }
+    const d = A(a.modelValue);
+    function c() {
+      k(!1);
+    }
+    async function k(t) {
+      var l;
+      t || (i("before-close"), await ((l = a.beforeClose) == null ? void 0 : l.call(a))), d.value = t;
+    }
+    function g() {
+      i("open");
+    }
+    function u() {
+      i("update:model-value", !1), i("close"), r();
+    }
+    function e() {
+      a.persistent || c();
+    }
+    function o(t) {
+      !a.noCloseOnEscKey && t.key === "Escape" && !a.persistent && c();
+    }
+    function n() {
+      v(), document.addEventListener("keyup", o, !1);
+    }
+    function r() {
+      document.removeEventListener("keyup", o), y();
+    }
+    F(() => {
+      a.modelValue ? n() : r();
+    });
+    let C = null;
+    function q(t) {
+      const l = document.querySelector(t), E = l && Array.from(l.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select')), $ = E == null ? void 0 : E.filter((S) => {
+        const T = window.getComputedStyle(S);
+        return T.display !== "none" && T.visibility !== "hidden" && !S.disabled;
+      });
+      return $ && $.length > 0 ? $[0] : null;
+    }
+    return N(
+      () => a.modelValue,
+      async (t) => {
+        if (d.value = t, t) {
+          n(), C = document.activeElement, await w();
+          const l = q(".m-backdrop-content");
+          l == null || l.focus();
+        } else
+          r(), await w(), C == null || C.focus();
+      }
+    ), p({
+      onBackdropAnimationEnter: g,
+      onBackdropAnimationLeave: u,
+      onBackdropClicked: e,
+      close: c,
+      present: d,
+      toggleModal: k,
+      onKeyPress: o
+    }), (t, l) => (m(), V(I, { to: t.teleportSelector }, [
+      U(X, {
+        appear: "",
+        name: t.transitionName,
+        onAfterEnter: g,
+        onAfterLeave: u
+      }, {
+        default: j(() => [
+          d.value ? (m(), D(
+            "div",
+            M({
+              key: 0,
+              class: "m-backdrop --present"
+            }, t.$attrs, {
+              class: [t.backdropClass, t.variant && `--variant-${t.variant}`, { "--persistent": t.persistent }]
+            }),
+            [
+              f("div", R, [
+                f("div", Y, [
+                  f(
+                    "div",
+                    {
+                      class: W(["m-backdrop-content", [t.backdropContentClass, `--justify-${t.justify}`, `--align-${t.align}`, { "--padding": t.contentPadding }]]),
+                      role: "button",
+                      tabindex: "-1",
+                      onClick: G(e, ["self"])
+                    },
+                    [
+                      b(t.$slots, "default", {
+                        close: c,
+                        onBackdropClicked: e
+                      }, void 0, !0)
+                    ],
+                    2
+                    /* CLASS */
+                  )
+                ])
+              ])
+            ],
+            16
+            /* FULL_PROPS */
+          )) : h("v-if", !0)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["name"])
+    ], 8, ["to"]));
+  }
+}), K = (a, p) => {
+  const s = a.__vccOpts || a;
+  for (const [i, v] of p)
+    s[i] = v;
+  return s;
+}, x = /* @__PURE__ */ K(Z, [["__scopeId", "data-v-7aa1682e"]]), _ = {
+  key: 0,
+  id: "dialogTitle",
+  class: "m-dialog-title"
+}, ee = {
+  key: 0,
+  class: "m-dialog-footer"
+}, te = /* @__PURE__ */ L({
+  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(a, { expose: p }) {
+    const s = a, i = P(() => import("./MazBtn-CsLtHm4K.mjs")), v = P(() => import("./x-mark-CnZwVvA7.mjs")), y = H(), d = A();
+    p({
+      close: () => {
+        var e, o;
+        return (o = (e = d.value) == null ? void 0 : e.close) == null ? void 0 : o.call(e);
+      }
+    });
+    const c = B(() => {
+      const e = [
+        "modelValue",
+        "title",
+        "noClose",
+        "maxWidth",
+        "minWidth",
+        "scrollable"
+      ];
+      return Object.fromEntries(
+        Object.entries(s).filter(([o]) => !e.includes(o))
+      );
+    }), k = B(() => ({
+      ...y,
+      class: void 0,
+      style: void 0
+    })), g = B(() => ({
+      class: y.class,
+      style: y.style
+    })), u = A();
+    return s.scrollable && N(() => s.modelValue, async (e) => {
+      await w(), e && u.value && setTimeout(() => {
+        var o;
+        (o = u.value) == null || o.scrollTo({ top: 0, behavior: "instant" });
+      }, 0);
+    }), (e, o) => (m(), V(x, M({ ...k.value, ...c.value }, {
+      ref_key: "backdrop",
+      ref: d,
+      "model-value": e.modelValue,
+      "transition-name": "modal-anim",
+      "aria-labelledby": "dialogTitle",
+      "aria-describedby": "dialogDesc",
+      "content-padding": "",
+      justify: "center",
+      variant: "dialog",
+      onClose: o[0] || (o[0] = (n) => e.$emit("close", n)),
+      onOpen: o[1] || (o[1] = (n) => e.$emit("open", n)),
+      "onUpdate:modelValue": o[2] || (o[2] = (n) => e.$emit("update:model-value", n))
+    }), {
+      default: j(({ close: n, onBackdropClicked: r }) => [
+        f(
+          "div",
+          M({
+            class: ["m-dialog", { "--scrollable": e.scrollable }],
+            role: "dialog",
+            "aria-modal": "true",
+            style: [{ "--max-width": e.maxWidth, "--min-width": e.minWidth }]
+          }, g.value),
+          [
+            b(e.$slots, "header", {
+              close: n,
+              onBackdropClicked: r
+            }, () => [
+              f(
+                "div",
+                {
+                  class: W(["m-dialog-header", { "--has-title": e.$slots.title || e.title }])
+                },
+                [
+                  e.$slots.title || e.title ? (m(), D("h2", _, [
+                    b(e.$slots, "title", {}, () => [
+                      J(
+                        Q(e.title),
+                        1
+                        /* TEXT */
+                      )
+                    ], !0)
+                  ])) : h("v-if", !0),
+                  !e.noClose && !e.persistent ? (m(), V(O(i), {
+                    key: 1,
+                    color: "transparent",
+                    size: "sm",
+                    icon: O(v),
+                    onClick: n
+                  }, null, 8, ["icon", "onClick"])) : h("v-if", !0)
+                ],
+                2
+                /* CLASS */
+              )
+            ], !0),
+            f(
+              "div",
+              {
+                id: "dialogDesc",
+                ref_key: "dialogContent",
+                ref: u,
+                class: "m-dialog-content"
+              },
+              [
+                b(e.$slots, "default", {
+                  close: n,
+                  onBackdropClicked: r
+                }, void 0, !0)
+              ],
+              512
+              /* NEED_PATCH */
+            ),
+            e.$slots.footer ? (m(), D("div", ee, [
+              b(e.$slots, "footer", {
+                close: n,
+                onBackdropClicked: r
+              }, void 0, !0)
+            ])) : h("v-if", !0)
+          ],
+          16
+          /* FULL_PROPS */
+        )
+      ]),
+      _: 3
+      /* FORWARDED */
+    }, 16, ["model-value"]));
+  }
+}), ne = /* @__PURE__ */ K(te, [["__scopeId", "data-v-b16ef3d7"]]);
+export {
+  ne as M,
+  K as _
+};