vue-html-dialog/dist/vue-html-dialog.js

A native HTML Dialog written in Vue.

import { defineComponent as w, ref as p, watch as B, onBeforeUnmount as E, createBlock as A, openBlock as C, Transition as L, withCtx as V, withDirectives as T, createElementVNode as g, normalizeStyle as $, withModifiers as c, normalizeClass as f, createElementBlock as y, createCommentVNode as b, renderSlot as D, vShow as O, onMounted as h } from "vue";
const I = ["id", "aria-describedby"], N = { role: "document" }, P = /* @__PURE__ */ w({
  __name: "HtmlDialog",
  props: {
    showBackdrop: { type: Boolean, default: !0 },
    closeOnBackdropClick: { type: Boolean, default: !0 },
    closeOnEscape: { type: Boolean, default: !0 },
    showCloseButton: { type: Boolean, default: !0 },
    titleId: String,
    dialogId: String,
    dialogClass: String,
    backdropClass: String,
    closeButtonClass: String,
    enterActiveClass: { type: String, default: "fade-enter-active" },
    leaveActiveClass: { type: String, default: "fade-leave-active" },
    transitionDuration: { type: Number, default: 300 }
  },
  emits: ["open", "close"],
  setup(r, { expose: v, emit: a }) {
    const o = r, i = p(null), n = p(!1);
    function s() {
      n.value = !0;
    }
    function u() {
      n.value = !1;
    }
    function m(t) {
      t.target === t.currentTarget && o.closeOnBackdropClick && u();
    }
    function d(t) {
      t.key === "Escape" && o.closeOnEscape && u();
    }
    return B(n, (t) => {
      t ? window.addEventListener("keydown", d) : window.removeEventListener("keydown", d);
    }), E(() => {
      window.removeEventListener("keydown", d);
    }), v({
      openDialog: s,
      closeDialog: u
    }), (t, e) => (C(), A(L, {
      "enter-active-class": t.enterActiveClass,
      onAfterEnter: e[4] || (e[4] = (l) => t.$emit("open")),
      "leave-active-class": t.leaveActiveClass,
      onAfterLeave: e[5] || (e[5] = (l) => t.$emit("close"))
    }, {
      default: V(() => [
        T(g("div", {
          class: f(["backdrop", t.backdropClass]),
          onPointerup: m,
          onClick: e[2] || (e[2] = c(() => {
          }, ["stop"])),
          onTouchend: e[3] || (e[3] = c(() => {
          }, ["stop"])),
          role: "presentation",
          style: $({ "--transition-duration": t.transitionDuration + "ms" })
        }, [
          g("dialog", {
            ref_key: "dialogEl",
            ref: i,
            open: "",
            id: t.dialogId,
            class: f(["dialog", t.dialogClass]),
            role: "dialog",
            onClick: e[0] || (e[0] = c(() => {
            }, ["stop"])),
            onTouchend: e[1] || (e[1] = c(() => {
            }, ["stop"])),
            "aria-modal": "true",
            "aria-describedby": t.titleId
          }, [
            g("div", N, [
              t.showCloseButton ? (C(), y("button", {
                key: 0,
                class: f(["close-button", t.closeButtonClass]),
                onPointerup: u,
                "aria-label": "Close the modal"
              }, "×", 34)) : b("", !0),
              D(t.$slots, "default", {}, void 0, !0)
            ])
          ], 42, I)
        ], 38), [
          [O, n.value && t.showBackdrop]
        ])
      ]),
      _: 3
    }, 8, ["enter-active-class", "leave-active-class"]));
  }
}), S = (r, v) => {
  const a = r.__vccOpts || r;
  for (const [o, i] of v)
    a[o] = i;
  return a;
}, H = /* @__PURE__ */ S(P, [["__scopeId", "data-v-16e8dd23"]]), M = { role: "document" }, z = /* @__PURE__ */ w({
  __name: "FullNativeDialog",
  props: {
    modelValue: Boolean,
    closeOnEscape: { type: Boolean, default: !0 },
    closeButton: { type: Boolean, default: !0 },
    dialogClass: String,
    closeButtonClass: String,
    enterActiveClass: { type: String, default: "fade-enter-active" },
    leaveActiveClass: { type: String, default: "fade-leave-active" },
    transitionDuration: { type: Number, default: 300 }
  },
  emits: ["update:modelValue", "open", "close"],
  setup(r, { emit: v }) {
    const a = r, o = p(null), i = p(!1), n = p(null), s = v;
    function u() {
      o.value && (o.value.open || (o.value.showModal(), s("update:modelValue", !0), s("open"), o.value.focus()));
    }
    function m() {
      !o.value || i.value || (i.value = !0, o.value.classList.add(a.leaveActiveClass), setTimeout(() => {
        var e, l;
        (e = o.value) == null || e.close(), i.value = !1, (l = o.value) == null || l.classList.remove(a.leaveActiveClass), s("update:modelValue", !1), s("close");
      }, a.transitionDuration));
    }
    B(
      () => a.modelValue,
      (e) => {
        var l;
        e ? (u(), n.value && clearTimeout(n.value), (l = o.value) == null || l.classList.add(a.enterActiveClass), n.value = window.setTimeout(() => {
          var k;
          (k = o.value) == null || k.classList.remove(a.enterActiveClass), n.value = null;
        }, a.transitionDuration)) : m();
      }
    );
    function d(e) {
      a.closeOnEscape || e.preventDefault();
    }
    function t() {
      s("update:modelValue", !1), s("close");
    }
    return h(() => {
      var e, l;
      (e = o.value) == null || e.addEventListener("cancel", d), (l = o.value) == null || l.addEventListener("close", t);
    }), E(() => {
      var e, l;
      (e = o.value) == null || e.removeEventListener("cancel", d), (l = o.value) == null || l.removeEventListener("close", t);
    }), (e, l) => (C(), y("dialog", {
      ref_key: "dialogEl",
      ref: o,
      class: f([e.dialogClass]),
      role: "dialog",
      onPointerdown: l[0] || (l[0] = c(() => {
      }, ["stop"])),
      "aria-modal": "true"
    }, [
      g("div", M, [
        e.closeButton ? (C(), y("button", {
          key: 0,
          class: f(["close-button", e.closeButtonClass]),
          onPointerdown: c(m, ["prevent"]),
          "aria-label": "Close dialog",
          type: "button"
        }, "×", 34)) : b("", !0),
        D(e.$slots, "default", {}, void 0, !0)
      ])
    ], 34));
  }
}), K = /* @__PURE__ */ S(z, [["__scopeId", "data-v-6c2d8e9f"]]);
export {
  K as FullNativeDialog,
  H as HtmlDialog
};