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

Farris Vue, a Farris Design based Vue3 component library.

var F = Object.defineProperty;
var E = (o, t, e) => t in o ? F(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
var I = (o, t, e) => E(o, typeof t != "symbol" ? t + "" : t, e);
import { defineComponent as M, ref as g, computed as c, watch as A, createVNode as l, Fragment as P, reactive as H, createApp as k, onUnmounted as L, onMounted as _, Transition as $, mergeProps as D } from "vue";
import { LocaleService as B } from "../locale/index.esm.js";
import "bignumber.js";
import "lodash-es";
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 }
}, q = {
  showCloseButton: { type: Boolean, default: !0 },
  animate: { type: String, default: "fadeIn" },
  options: { type: Object }
}, O = /* @__PURE__ */ M({
  name: "Toast",
  props: q,
  emits: ["close", "click"],
  setup: (o, t) => {
    const e = g(o.animate), r = "fadeOut", n = c(() => o.options), a = g(!1), s = c(() => n.value.title && n.value.message), u = c(() => !n.value.title && n.value.message), m = c(() => {
      const i = {
        animated: a.value,
        toast: !0,
        "toast--only-content": !s.value
      };
      return i[o.animate] = !1, i[r] = a.value, i["toasty-type-" + n.value.type] = !0, n.value.theme && (i[n.value.theme] = !0), i;
    }), d = c(() => {
      const S = `f-icon-${n.value && n.value.type ? n.value.type.replace("toasty-type-", "") : "default"}`, x = {
        "f-icon": !0
      };
      return x[S] = !0, x;
    }), f = c(() => n.value.title || n.value.message), y = c(() => o.showCloseButton), b = c(() => !!n.value.buttons || !!t.slots.default), h = c(() => B.getLocale() === "en" ? {
      wordBreak: "keep-all",
      overflowWrap: "break-word"
    } : {});
    function C(i) {
      i.stopPropagation(), i.preventDefault(), a.value = !1, setTimeout(() => {
        t.emit("close", n.value);
      }, 200);
    }
    function T(i, w) {
    }
    function p(i) {
      return `f-preten-link ${i.customClass ? i.customClass : ""}`;
    }
    A(e, () => {
      e.value;
    });
    const v = () => {
      var i;
      return l(P, null, [l("div", {
        class: "after-toast-msg text-right"
      }, [!t.slots.default && ((i = n.value.buttons) == null ? void 0 : i.map((w) => l("span", {
        class: p(w),
        onClick: (S) => void 0
      }, [w.text]))), t.slots.default && t.slots.default()])]);
    };
    return () => l("div", {
      class: m.value,
      style: "min-height:44px"
    }, [y.value && l("button", {
      title: B.getLocaleValue("messageBox.close"),
      class: "toast-close f-btn-icon f-bare",
      onClick: C
    }, [l("span", {
      class: "f-icon modal_close"
    }, null)]), f.value && l("section", {
      class: "modal-tips"
    }, [!s.value && l("div", {
      class: "float-left modal-tips-iconwrap"
    }, [l("span", {
      class: d.value
    }, null)]), l("div", {
      class: "modal-tips-content"
    }, [s.value && l(P, null, [l("h5", {
      class: "toast-title modal-tips-title",
      innerHTML: n.value.title
    }, null), l("p", {
      class: "toast-msg",
      innerHTML: n.value.message,
      style: h.value
    }, null), b.value && v()]), u.value && (n.value.buttons ? l("div", {
      class: "toast-title-btns-wrapper d-flex"
    }, [l("h5", {
      class: "toast-title modal-tips-title only-toast-msg",
      style: h.value,
      innerHTML: n.value.message
    }, null), l("div", {
      class: "after-toast-title text-right ml-auto"
    }, [v()])]) : l("h5", {
      class: "toast-title modal-tips-title only-toast-msg",
      style: h.value,
      innerHTML: n.value.message
    }, null))])])]);
  }
}), V = ["moz", "ms", "webkit"];
function K() {
  let o = 0;
  return (t) => {
    const e = (/* @__PURE__ */ new Date()).getTime(), r = Math.max(0, 16 - (e - o)), n = setTimeout(() => {
      t(e + r);
    }, r);
    return o = e + r, n;
  };
}
function W() {
  if (typeof window > "u")
    return () => 0;
  if (window.requestAnimationFrame)
    return window.requestAnimationFrame.bind(window);
  const o = V.filter((t) => `${t}RequestAnimationFrame` in window)[0];
  return o ? window[`${o}RequestAnimationFrame`] : K();
}
W();
g("");
function R() {
  if (typeof window > "u" || typeof navigator > "u")
    return !1;
  const o = navigator.userAgent || navigator.vendor || window.opera, t = [
    /iPhone/i,
    /iPod/i,
    /Android.*Mobile/i,
    // Android 手机通常包含 "Mobile" 字样，而平板不包含
    /webOS/i,
    /BlackBerry/i,
    /IEMobile/i,
    /Opera Mini/i,
    /Harmony/i
  ], e = [
    /iPad/i,
    /Android(?!.*Mobile)/i,
    // Android 平板通常不含 "Mobile"
    /Tablet/i,
    /PlayBook/i,
    /Kindle/i,
    /Silk/i
  ];
  for (const m of e)
    if (m.test(o))
      return !1;
  for (const m of t)
    if (m.test(o))
      return !0;
  if (typeof screen > "u")
    return !1;
  const r = "ontouchstart" in window || navigator.maxTouchPoints > 0, n = screen.width, a = screen.height, s = Math.min(n, a);
  return !!(r && s <= 768);
}
function X() {
  const o = R();
  return o && document.body.classList.add("f-mobile"), o;
}
typeof document < "u" && X();
const N = /* @__PURE__ */ M({
  name: "Notify",
  props: j,
  emits: ["close", "empty"],
  setup(o, t) {
    var T;
    const e = R(), n = `farris-notify-${(T = o.options) != null && T.type ? o.options.type : "info"}}`, a = c(() => ({
      "farris-notify": !0,
      [n]: e
    })), s = {
      left: 12,
      right: 12,
      top: 20,
      bottom: 12
    }, u = g(), m = g(o.options), d = g(o.showCloseButton), f = c(() => o.position || "bottom-right"), y = c(() => o.timeout != null ? o.timeout : 3e3), b = c(() => {
      const p = o.bottom ? o.bottom : s.bottom, v = o.top ? o.top : s.top, i = {
        transition: "all 0.2s ease",
        left: f.value.indexOf("left") > -1 ? `${o.left ? o.left : s.left}px` : "",
        right: f.value.indexOf("right") > -1 ? `${o.right ? o.right : s.right}px` : "",
        top: f.value.indexOf("top") > -1 ? `${v}px` : "",
        bottom: f.value.indexOf("bottom") > -1 ? `${p}px` : ""
      };
      return f.value.indexOf("center") > -1 && (i.left = "50%", i.marginLeft = "calc(-24rem / 2)", f.value === "center-center" && (i.top = "50%", i.transform = "translate(-50%, -50%)")), i;
    });
    function h(p) {
      t.emit("close");
    }
    y.value && setTimeout(() => {
      h();
    }, y.value), t.expose({
      closeToast: h,
      container: u,
      notifyPosition: f
    });
    function C(p, v) {
      h();
    }
    return () => {
      var p;
      return e ? l("div", {
        class: a.value,
        ref: u
      }, [(p = o.options) == null ? void 0 : p.message]) : l("div", {
        class: a.value,
        style: b.value,
        ref: u
      }, [l(O, {
        options: m.value,
        showCloseButton: d.value,
        animate: o.animate,
        onClose: (v) => C(v, m.value)
      }, null)]);
    };
  }
});
class Y {
  constructor() {
    I(this, "notifyRefs", []);
    I(this, "globalConfig", H({}));
  }
  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 s = k({
      setup() {
        var d;
        const u = g();
        function m() {
          u.value.container.style.transform = "scale(0)", setTimeout(() => {
            e.updateNotifyPositionForClose(n, u), s.unmount();
          }, 220);
        }
        if (n.position.indexOf("top") > -1) {
          const f = e.getNotifyInstances(n.position), y = f[f.length - 1];
          if (y) {
            const b = y.value.container.getBoundingClientRect();
            n.top = b.bottom;
          }
        }
        return n.safeHtml && ((d = n.options) != null && d.message) && (n.options.message = e.escapeAllHtml(n.options.message)), L(() => {
          document.body.removeChild(a);
        }), _(() => {
          e.updateNotifyPositionForCreate(n, u);
        }), () => l($, {
          mode: "out-in",
          name: "fade",
          appear: !0
        }, {
          default: () => [l(N, D({
            ref: u
          }, n, {
            onClose: m
          }), null)]
        });
      }
    });
    return s.provide("NotifyService", this), document.body.appendChild(a), s.use(B.i18n), s.mount(a), s;
  }
  getNotifyInstances(t) {
    return this.notifyRefs.filter((e) => e.value.notifyPosition === t);
  }
  updateNotifyPositionForCreate(t, e) {
    if (this.notifyRefs && this.notifyRefs.length) {
      const r = 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 + r - a.bottom + "px";
      });
    }
    this.notifyRefs = [...this.notifyRefs, e];
  }
  updateNotifyPositionForClose(t, e) {
    const r = 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((s) => {
        s.value.container.style.top = s.value.container.offsetTop - s.value.container.offsetHeight + "px";
      });
    }
    r > -1 && this.notifyRefs.splice(r, 1);
  }
  show(t) {
    return this.createNotifyInstance(t);
  }
  buildNotifyProps(t, e) {
    let r = "", n = "", a, s, u;
    typeof e == "string" ? r = e : e && (r = e.message || "", n = e.title || "", s = e.position || null, u = e.showCloseButton != null ? e.showCloseButton : null, a = e.timeout != null ? e.timeout : null);
    const d = {
      options: {
        type: t,
        message: r,
        title: n
      }
    };
    return s != null && (d.position = s), u != null && (d.showCloseButton = u), a != null && (d.timeout = a), d;
  }
  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 z = Symbol("NOTIFY_SERVICE_TOKEN");
N.install = (o) => {
  o.component(N.name, N), o.component(O.name, O);
  const t = new Y();
  o.provide(z, t), o.provide("FNotifyService", t);
};
export {
  N as FNotify,
  Y as FNotifyService,
  O as FToast,
  z as F_NOTIFY_SERVICE_TOKEN,
  N as default,
  j as notifyProps,
  q as toastProps
};