maz-ui/components/MazBackdrop.mjs

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { defineComponent as L, ref as P, onMounted as V, watch as D, nextTick as B, openBlock as h, createBlock as M, Teleport as N, createVNode as T, Transition as O, withCtx as $, createElementBlock as j, mergeProps as q, createElementVNode as v, normalizeClass as z, withModifiers as F, renderSlot as K, createCommentVNode as I } from "vue";
import './assets/MazBackdrop.DPLKrrH6.css';const G = {
  role: "dialog",
  class: "m-backdrop-container",
  "aria-modal": "true"
}, H = { class: "m-backdrop-wrapper" }, A = "--backdrop-present", J = /* @__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(t, { expose: r, emit: a }) {
    const o = a;
    function d() {
      document.documentElement.classList.add(A);
    }
    function w() {
      document.querySelector(".m-backdrop.--present") || document.documentElement.classList.remove(A);
    }
    const s = P(t.modelValue);
    function l() {
      k(!1);
    }
    async function k(e) {
      var n;
      e || (o("before-close"), await ((n = t.beforeClose) == null ? void 0 : n.call(t))), s.value = e;
    }
    function y() {
      o("open");
    }
    function b() {
      o("update:model-value", !1), o("close"), f();
    }
    function i() {
      t.persistent || l();
    }
    function u(e) {
      !t.noCloseOnEscKey && e.key === "Escape" && !t.persistent && l();
    }
    function C() {
      d(), document.addEventListener("keyup", u, !1);
    }
    function f() {
      document.removeEventListener("keyup", u), w();
    }
    V(() => {
      t.modelValue ? C() : f();
    });
    let c = null;
    function S(e) {
      const n = document.querySelector(e), m = n && Array.from(n.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select')), p = m == null ? void 0 : m.filter((E) => {
        const g = window.getComputedStyle(E);
        return g.display !== "none" && g.visibility !== "hidden" && !E.disabled;
      });
      return p && p.length > 0 ? p[0] : null;
    }
    return D(
      () => t.modelValue,
      async (e) => {
        if (s.value = e, e) {
          C(), c = document.activeElement, await B();
          const n = S(".m-backdrop-content");
          n == null || n.focus();
        } else
          f(), await B(), c == null || c.focus();
      }
    ), r({
      onBackdropAnimationEnter: y,
      onBackdropAnimationLeave: b,
      onBackdropClicked: i,
      close: l,
      present: s,
      toggleModal: k,
      onKeyPress: u
    }), (e, n) => (h(), M(N, { to: e.teleportSelector }, [
      T(O, {
        appear: "",
        name: e.transitionName,
        onAfterEnter: y,
        onAfterLeave: b
      }, {
        default: $(() => [
          s.value ? (h(), j(
            "div",
            q({
              key: 0,
              class: "m-backdrop --present m-reset-css"
            }, e.$attrs, {
              class: [e.backdropClass, e.variant && `--variant-${e.variant}`, { "--persistent": e.persistent }]
            }),
            [
              v("div", G, [
                v("div", H, [
                  v(
                    "div",
                    {
                      class: z(["m-backdrop-content", [e.backdropContentClass, `--justify-${e.justify}`, `--align-${e.align}`, { "--padding": e.contentPadding }]]),
                      role: "button",
                      tabindex: "-1",
                      onClick: F(i, ["self"])
                    },
                    [
                      K(e.$slots, "default", {
                        close: l,
                        onBackdropClicked: i
                      }, void 0, !0)
                    ],
                    2
                    /* CLASS */
                  )
                ])
              ])
            ],
            16
            /* FULL_PROPS */
          )) : I("v-if", !0)
        ]),
        _: 3
        /* FORWARDED */
      }, 8, ["name"])
    ], 8, ["to"]));
  }
}), Q = (t, r) => {
  const a = t.__vccOpts || t;
  for (const [o, d] of r)
    a[o] = d;
  return a;
}, W = /* @__PURE__ */ Q(J, [["__scopeId", "data-v-90448c91"]]);
export {
  W as default
};