@farris/ui-vue/components/notify/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

var P = Object.defineProperty;
var E = (s, t, e) => t in s ? P(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
var w = (s, t, e) => E(s, typeof t != "symbol" ? t + "" : t, e);
import { defineComponent as B, ref as v, computed as c, watch as F, createVNode as i, Fragment as x, reactive as k, createApp as _, onUnmounted as $, onMounted as L, Transition as M, mergeProps as j } from "vue";
import { useI18n as A } from "vue-i18n";
import { LocaleService as V } from "../locale/index.esm.js";
const D = {
  showCloseButton: { type: Boolean, default: !0 },
  position: { type: String, default: "top-center" },
  timeout: { type: Number, default: 3e3 },
  theme: { type: String, default: "bootstrap" },
  left: { type: Number },
  right: { type: Number },
  top: { type: Number },
  bottom: { type: Number },
  id: { type: String },
  animate: { type: String, default: "fadeIn" },
  options: { type: Object },
  safeHtml: { type: Boolean, default: !0 }
}, K = {
  showCloseButton: { type: Boolean, default: !0 },
  animate: { type: String, default: "fadeIn" },
  options: { type: Object }
}, T = /* @__PURE__ */ B({
  name: "Toast",
  props: K,
  emits: ["close", "click"],
  setup: (s, t) => {
    const {
      locale: e,
      t: u
    } = A(), n = v(s.animate), a = "fadeOut", o = c(() => s.options), l = v(!1), d = c(() => o.value.title && o.value.message), f = c(() => !o.value.title && o.value.message), m = c(() => {
      const r = {
        animated: l.value,
        toast: !0,
        "toast--only-content": f.value
      };
      return r[s.animate] = !1, r[a] = l.value, r["toasty-type-" + o.value.type] = !0, o.value.theme && (r[o.value.theme] = !0), r;
    }), h = c(() => {
      const O = `f-icon-${o.value && o.value.type ? o.value.type.replace("toasty-type-", "") : "default"}`, S = {
        "f-icon": !0
      };
      return S[O] = !0, S;
    }), p = c(() => o.value.title || o.value.message), g = c(() => s.showCloseButton), y = c(() => !!o.value.buttons || !!t.slots.default), N = c(() => e.value === "en" ? {
      wordBreak: "keep-all",
      overflowWrap: "break-word"
    } : {});
    function R(r) {
      r.stopPropagation(), r.preventDefault(), l.value = !1, setTimeout(() => {
        t.emit("close", o.value);
      }, 200);
    }
    function W(r, b) {
    }
    function H(r) {
      return `f-preten-link ${r.customClass ? r.customClass : ""}`;
    }
    F(n, () => {
      n.value;
    });
    const I = () => {
      var r;
      return i(x, null, [i("div", {
        class: "after-toast-msg text-right"
      }, [!t.slots.default && ((r = o.value.buttons) == null ? void 0 : r.map((b) => i("span", {
        class: H(b),
        onClick: (O) => void 0
      }, [b.text]))), t.slots.default && t.slots.default()])]);
    };
    return () => i("div", {
      class: m.value,
      style: "min-height:44px"
    }, [g.value && i("button", {
      title: u("messageBox.close"),
      class: "toast-close f-btn-icon f-bare",
      onClick: R
    }, [i("span", {
      class: "f-icon modal_close"
    }, null)]), p.value && i("section", {
      class: "modal-tips"
    }, [i("div", {
      class: "float-left modal-tips-iconwrap"
    }, [i("span", {
      class: h.value
    }, null)]), i("div", {
      class: "modal-tips-content"
    }, [d.value && i(x, null, [i("h5", {
      class: "toast-title modal-tips-title",
      innerHTML: o.value.title
    }, null), i("p", {
      class: "toast-msg",
      innerHTML: o.value.message,
      style: N.value
    }, null), y.value && I()]), f.value && (o.value.buttons ? i("div", {
      class: "toast-title-btns-wrapper d-flex"
    }, [i("h5", {
      class: "toast-title modal-tips-title only-toast-msg",
      style: N.value,
      innerHTML: o.value.message
    }, null), i("div", {
      class: "after-toast-title text-right ml-auto"
    }, [I()])]) : i("h5", {
      class: "toast-title modal-tips-title only-toast-msg",
      style: N.value,
      innerHTML: o.value.message
    }, null))])])]);
  }
}), C = /* @__PURE__ */ B({
  name: "Notify",
  props: D,
  emits: ["close", "empty"],
  setup(s, t) {
    const e = c(() => ({
      "farris-notify": !0
    })), u = {
      left: 12,
      right: 12,
      top: 20,
      bottom: 12
    }, n = v(), a = v(s.options), o = v(s.showCloseButton), l = c(() => s.position || "bottom-right"), d = c(() => s.timeout != null ? s.timeout : 3e3), f = c(() => {
      const p = s.bottom ? s.bottom : u.bottom, g = s.top ? s.top : u.top, y = {
        transition: "all 0.2s ease",
        left: l.value.indexOf("left") > -1 ? `${s.left ? s.left : u.left}px` : "",
        right: l.value.indexOf("right") > -1 ? `${s.right ? s.right : u.right}px` : "",
        top: l.value.indexOf("top") > -1 ? `${g}px` : "",
        bottom: l.value.indexOf("bottom") > -1 ? `${p}px` : ""
      };
      return l.value.indexOf("center") > -1 && (y.left = "50%", y.marginLeft = "calc(-24rem / 2)", l.value === "center-center" && (y.top = "50%", y.transform = "translate(-50%, -50%)")), y;
    });
    function m(p) {
      t.emit("close");
    }
    d.value && setTimeout(() => {
      m();
    }, d.value), t.expose({
      closeToast: m,
      container: n,
      notifyPosition: l
    });
    function h(p, g) {
      m();
    }
    return () => i("div", {
      class: e.value,
      style: f.value,
      ref: n
    }, [i(T, {
      options: a.value,
      showCloseButton: o.value,
      animate: s.animate,
      onClose: (p) => h(p, a.value)
    }, null)]);
  }
});
class Y {
  constructor() {
    w(this, "notifyRefs", []);
    w(this, "globalConfig", k({}));
  }
  escapeAllHtml(t) {
    if (typeof t != "string" || !t)
      return "";
    const e = document.createElement("div");
    return e.textContent = t || "", e.innerHTML.replace(/\\n/g, "<br>").replace(/\\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;").replace(/\\r/g, "");
  }
  createNotifyInstance(t) {
    const e = this, n = Object.assign({
      timeout: 3e3,
      position: "bottom-right",
      showCloseButton: !0,
      safeHtml: !0
    }, this.globalConfig, {
      ...t
    }), a = document.createElement("div");
    a.style.display = "contents";
    const o = _({
      setup() {
        var f;
        const l = v();
        function d() {
          l.value.container.style.transform = "scale(0)", setTimeout(() => {
            e.updateNotifyPositionForClose(n, l), o.unmount();
          }, 220);
        }
        if (n.position.indexOf("top") > -1) {
          const m = e.getNotifyInstances(n.position), h = m[m.length - 1];
          if (h) {
            const p = h.value.container.getBoundingClientRect();
            n.top = p.bottom;
          }
        }
        return n.safeHtml && ((f = n.options) != null && f.message) && (n.options.message = e.escapeAllHtml(n.options.message)), $(() => {
          document.body.removeChild(a);
        }), L(() => {
          e.updateNotifyPositionForCreate(n, l);
        }), () => i(M, {
          mode: "out-in",
          name: "fade",
          appear: !0
        }, {
          default: () => [i(C, j({
            ref: l
          }, n, {
            onClose: d
          }), null)]
        });
      }
    });
    return o.provide("NotifyService", this), document.body.appendChild(a), o.use(V.i18n), o.mount(a), o;
  }
  getNotifyInstances(t) {
    return this.notifyRefs.filter((e) => e.value.notifyPosition === t);
  }
  updateNotifyPositionForCreate(t, e) {
    if (this.notifyRefs && this.notifyRefs.length) {
      const u = window.innerHeight;
      t.position.indexOf("bottom") > -1 && this.getNotifyInstances(t.position).forEach((n) => {
        const a = n.value.container.getBoundingClientRect();
        n.value.container.style.bottom = a.height + u - a.bottom + "px";
      });
    }
    this.notifyRefs = [...this.notifyRefs, e];
  }
  updateNotifyPositionForClose(t, e) {
    const u = this.notifyRefs.indexOf(e);
    if (t.position.indexOf("top") > -1) {
      const n = this.getNotifyInstances(t.position), a = n.indexOf(e);
      n.slice(a + 1).forEach((o) => {
        o.value.container.style.top = o.value.container.offsetTop - o.value.container.offsetHeight + "px";
      });
    }
    u > -1 && this.notifyRefs.splice(u, 1);
  }
  show(t) {
    return this.createNotifyInstance(t);
  }
  buildNotifyProps(t, e) {
    let u = "", n = "", a, o, l;
    typeof e == "string" ? u = e : e && (u = e.message || "", n = e.title || "", o = e.position || null, l = e.showCloseButton != null ? e.showCloseButton : null, a = e.timeout != null ? e.timeout : null);
    const f = {
      options: {
        type: t,
        message: u,
        title: n
      }
    };
    return o != null && (f.position = o), l != null && (f.showCloseButton = l), a != null && (f.timeout = a), f;
  }
  info(t) {
    const e = this.buildNotifyProps("info", t);
    return this.show(e);
  }
  success(t) {
    const e = this.buildNotifyProps("success", t);
    return this.show(e);
  }
  warning(t) {
    const e = this.buildNotifyProps("warning", t);
    return this.show(e);
  }
  error(t) {
    const e = this.buildNotifyProps("error", t);
    return this.show(e);
  }
  close(t) {
    t && t.unmount();
  }
  closeAll() {
    this.notifyRefs.forEach((t) => {
      t == null || t.value.closeToast();
    }), this.notifyRefs.length = 0;
  }
}
const U = Symbol("NOTIFY_SERVICE_TOKEN");
C.install = (s) => {
  s.component(C.name, C), s.component(T.name, T);
  const t = new Y();
  s.provide(U, t), s.provide("FNotifyService", t);
};
export {
  C as FNotify,
  Y as FNotifyService,
  T as FToast,
  U as F_NOTIFY_SERVICE_TOKEN,
  C as default,
  D as notifyProps,
  K as toastProps
};