vue3-confirm-dialog/dist/vue3-confirm-dialog.js

Simple Confirm Dialog verification plugin with Vue 3.

import { resolveDirective as v, openBlock as n, createBlock as y, Transition as c, withCtx as f, createElementBlock as a, createVNode as b, createElementVNode as u, createCommentVNode as r, withDirectives as k, withKeys as m, vModelText as C, normalizeClass as w, withModifiers as h, toDisplayString as p } from "vue";
class T {
  constructor() {
    this.events = {};
  }
  on(e, s) {
    this.events[e] = this.events[e] || [], this.events[e].push(s);
  }
  close(e, s) {
    if (this.events[e]) {
      for (var o = 0; o < this.events[e].length; o++)
        if (this.events[e][o] === s) {
          this.events[e].splice(o, 1);
          break;
        }
    }
  }
  emit(e, s) {
    this.events[e] && this.events[e].forEach(function(o) {
      o(s);
    });
  }
}
const d = new T();
const E = (t, e) => {
  const s = t.__vccOpts || t;
  for (const [o, l] of e)
    s[o] = l;
  return s;
}, O = {
  mounted: (t) => t.focus()
}, S = {
  name: "Vue3ConfirmDialog",
  directives: {
    focus: O
  },
  data() {
    return {
      isShow: !1,
      password: null,
      dialog: {
        auth: !1,
        title: "",
        message: "",
        button: {}
      },
      params: {}
    };
  },
  methods: {
    resetState() {
      this.password = null, this.dialog = {
        auth: !1,
        title: "",
        message: "",
        button: {},
        callback: () => {
        }
      };
    },
    handleClickButton({ target: t }, e) {
      t.id != "vueConfirm" && (e && this.dialog.auth && !this.password || (this.isShow = !1, this.params.callback && this.params.callback(e, this.password)));
    },
    handleClickOverlay({ target: t }) {
      t.id == "vueConfirm" && (this.isShow = !1, this.params.callback && this.params.callback(!1, this.password));
    },
    handleKeyUp({ keyCode: t }) {
      t == 27 && this.handleClickOverlay({ target: { id: "vueConfirm" } }), t == 13 && this.handleClickButton({ target: { id: "" } }, !0);
    },
    open(t) {
      this.resetState(), this.params = t, this.isShow = !0, Object.entries(t).forEach((e) => {
        typeof e[1] == typeof this.dialog[e[0]] && (this.dialog[e[0]] = e[1]);
      });
    }
  },
  mounted() {
    d.on("open", (t) => {
      this.open(t);
    }), d.on("close", () => {
      this.handleClickOverlay({ target: { id: "vueConfirm" } });
    });
  }
}, B = S, D = {
  key: 0,
  ref: "vueConfirmDialog",
  class: "vc-container"
}, V = { class: "vc-text-grid" }, $ = ["innerHTML"], M = ["innerHTML"], j = { key: 2 }, A = ["disabled"];
function H(t, e, s, o, l, K) {
  const g = v("focus");
  return n(), y(c, { name: "fade" }, {
    default: f(() => [
      t.isShow ? (n(), a("div", {
        key: 0,
        onClick: e[4] || (e[4] = (...i) => t.handleClickOverlay && t.handleClickOverlay(...i)),
        class: "vc-overlay",
        id: "vueConfirm"
      }, [
        b(c, { name: "zoom" }, {
          default: f(() => [
            t.isShow ? (n(), a("div", D, [
              u("span", V, [
                t.dialog.title ? (n(), a("h4", {
                  key: 0,
                  class: "vc-title",
                  innerHTML: t.dialog.title
                }, null, 8, $)) : r("", !0),
                t.dialog.message ? (n(), a("p", {
                  key: 1,
                  class: "vc-text",
                  innerHTML: t.dialog.message
                }, null, 8, M)) : r("", !0),
                t.dialog.auth ? (n(), a("span", j, [
                  k(u("input", {
                    "onUpdate:modelValue": e[0] || (e[0] = (i) => t.password = i),
                    onKeyup: e[1] || (e[1] = m((i) => t.handleClickButton(i, !0), ["13"])),
                    class: "vc-input",
                    type: "password",
                    name: "vc-password",
                    placeholder: "Password",
                    autocomplete: "off"
                  }, null, 544), [
                    [g],
                    [C, t.password]
                  ])
                ])) : r("", !0)
              ]),
              u("div", {
                class: w(["vc-btn-grid", { isMono: !t.dialog.button.no || !t.dialog.button.yes }])
              }, [
                t.dialog.button.no ? (n(), a("button", {
                  key: 0,
                  onClick: e[2] || (e[2] = h((i) => t.handleClickButton(i, !1), ["stop"])),
                  class: "vc-btn left",
                  type: "button"
                }, p(t.dialog.button.no), 1)) : r("", !0),
                t.dialog.button.yes ? (n(), a("button", {
                  key: 1,
                  disabled: t.dialog.auth ? !t.password : !1,
                  onClick: e[3] || (e[3] = h((i) => t.handleClickButton(i, !0), ["stop"])),
                  class: "vc-btn",
                  type: "button"
                }, p(t.dialog.button.yes), 9, A)) : r("", !0)
              ], 2)
            ], 512)) : r("", !0)
          ]),
          _: 1
        })
      ])) : r("", !0)
    ]),
    _: 1
  });
}
const L = /* @__PURE__ */ E(B, [["render", H]]), z = {
  install: (t, e = {}) => {
    if (globalThis.installed)
      return;
    globalThis.installed = !0, globalThis.params = e, t.component(e.componentName || "vue3-confirm-dialog", L);
    const s = (o) => {
      if (typeof o != "object" || Array.isArray(o)) {
        let l = typeof o;
        throw Array.isArray(o) && (l = "array"), new Error(
          `Options type must be an object. Caught: ${l}. Expected: object`
        );
      }
      if (typeof o == "object") {
        if (o.hasOwnProperty("callback") && typeof o.callback != "function") {
          let l = typeof o.callback;
          throw new Error(
            `Callback type must be an function. Caught: ${l}. Expected: function`
          );
        }
        d.emit("open", o);
      }
    };
    s.close = () => {
      d.emit("close");
    }, t.config.globalProperties.$confirm = s, t.$confirm = s;
  }
};
export {
  z as default
};