maz-ui 3.47.2-beta.8 → 3.48.0

package/components/chunks/MazDialog-BjQ3ivmv.mjs

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