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

A VueJs(Vue3) component library for creating confirm dialog.

import { createElementBlock as d, openBlock as u, createElementVNode as o, withModifiers as f, normalizeStyle as C, normalizeClass as r, createCommentVNode as g, toDisplayString as a, createApp as b } from "vue";
const y = (t, e) => {
  const s = t.__vccOpts || t;
  for (const [n, i] of e)
    s[n] = i;
  return s;
}, p = { class: "rms-dialog-box-content box px-4 py-6" }, x = { class: "title" }, h = { class: "mb-4" }, v = { class: "buttons is-centered mt-6" }, S = {
  __name: "ConfirmDialog",
  props: {
    title: { type: String, default: "" },
    message: { type: String, default: "" },
    btnConfirmText: { type: String, default: "OK" },
    btnCancelText: { type: String, default: "Cancel" },
    onConfirm: { type: Function, required: !0 },
    onCancel: { type: Function, required: !0 },
    dialogBoxMinWidth: { type: String, default: "300px" },
    dialogBoxClasses: { type: String, default: " has-background-primary" },
    btnConfirmClasses: { type: String, default: " is-primary is-outlined" },
    btnCancelClasses: { type: String, default: " is-danger is-outlined" },
    showCloseIcon: { type: Boolean, default: !0 },
    btnConfirmRes: { type: [String, Boolean], default: !0 },
    btnCancelRes: { type: [String, Boolean], default: !1 }
  },
  setup(t) {
    const e = t;
    function s() {
      e.onConfirm(e.btnConfirmRes || !0);
    }
    function n() {
      e.onCancel(e.btnCancelRes || !1);
    }
    function i() {
      e.onCancel();
    }
    return (c, l) => (u(), d("div", {
      class: "rms-dialog-overlay is-flex is-justify-content-center is-align-items-center",
      onClick: i
    }, [
      o("div", {
        class: r("rms-dialog-box has-text-centered  " + t.dialogBoxClasses),
        style: C({ minWidth: t.dialogBoxMinWidth }),
        onClick: l[0] || (l[0] = f(() => {
        }, ["stop"]))
      }, [
        t.showCloseIcon ? (u(), d("button", {
          key: 0,
          class: "delete is-pulled-right m-2",
          onClick: n
        })) : g("", !0),
        o("div", p, [
          o("h2", x, a(t.title), 1),
          o("p", h, a(t.message), 1),
          o("div", v, [
            o("button", {
              onClick: n,
              class: r("button " + t.btnCancelClasses)
            }, a(t.btnCancelText), 3),
            o("button", {
              onClick: s,
              class: r("button " + t.btnConfirmClasses)
            }, a(t.btnConfirmText), 3)
          ])
        ])
      ], 6)
    ]));
  }
}, m = /* @__PURE__ */ y(S, [["__scopeId", "data-v-fb6cc521"]]);
function w(t) {
  return new Promise((e, s) => {
    const n = document.createElement("div");
    document.body.appendChild(n);
    const i = b(m, {
      ...t,
      onConfirm: (l) => {
        e(l), c();
      },
      onCancel: (l) => {
        e(l || null), c();
      }
    });
    i.mount(n);
    function c() {
      document.body.contains(n) && (i.unmount(), document.body.removeChild(n));
    }
  });
}
const D = {
  install(t) {
    t.component("ConfirmDialog", m);
  }
};
export {
  m as ConfirmDialog,
  D as default,
  w as showDialog
};