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

Farris Vue, a Farris Design based Vue3 component library.

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