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

Farris Vue, a Farris Design based Vue3 component library.

var F = Object.defineProperty;
var H = (n, t, e) => t in n ? F(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
var x = (n, t, e) => H(n, typeof t != "symbol" ? t + "" : t, e);
import { defineComponent as R, ref as g, computed as c, watch as M, createVNode as l, Fragment as P, reactive as k, createApp as A, onUnmounted as E, onMounted as $, Transition as L, mergeProps as _ } 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 }
}, I = /* @__PURE__ */ R({
  name: "Toast",
  props: q,
  emits: ["close", "click"],
  setup: (n, t) => {
    const e = g(n.animate), r = "fadeOut", o = c(() => n.options), a = g(!1), s = c(() => o.value.title && o.value.message), u = c(() => !o.value.title && o.value.message), d = c(() => {
      const i = {
        animated: a.value,
        toast: !0,
        "toast--only-content": !s.value
      };
      return i[n.animate] = !1, i[r] = a.value, i["toasty-type-" + o.value.type] = !0, o.value.theme && (i[o.value.theme] = !0), i;
    }), m = c(() => {
      const S = `f-icon-${o.value && o.value.type ? o.value.type.replace("toasty-type-", "") : "default"}`, O = {
        "f-icon": !0
      };
      return O[S] = !0, O;
    }), f = c(() => o.value.title || o.value.message), y = c(() => n.showCloseButton), b = c(() => !!o.value.buttons || !!t.slots.default), h = c(() => B.getLocale() === "en" ? {
      wordBreak: "keep-all",
      overflowWrap: "break-word"
    } : {});
    function T(i) {
      i.stopPropagation(), i.preventDefault(), a.value = !1, setTimeout(() => {
        t.emit("close", o.value);
      }, 200);
    }
    function C(i, w) {
    }
    function p(i) {
      return `f-preten-link ${i.customClass ? i.customClass : ""}`;
    }
    M(e, () => {
      e.value;
    });
    const v = () => {
      var i;
      return l(P, null, [l("div", {
        class: "after-toast-msg text-right"
      }, [!t.slots.default && ((i = o.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: d.value,
      style: "min-height:44px"
    }, [y.value && l("button", {
      title: B.getLocaleValue("messageBox.close"),
      class: "toast-close f-btn-icon f-bare",
      onClick: T
    }, [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: m.value
    }, null)]), l("div", {
      class: "modal-tips-content"
    }, [s.value && l(P, null, [l("h5", {
      class: "toast-title modal-tips-title",
      innerHTML: o.value.title
    }, null), l("p", {
      class: "toast-msg",
      innerHTML: o.value.message,
      style: h.value
    }, null), b.value && v()]), u.value && (o.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: o.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: o.value.message
    }, null))])])]);
  }
}), D = ["moz", "ms", "webkit"];
function V() {
  let n = 0;
  return (t) => {
    const e = (/* @__PURE__ */ new Date()).getTime(), r = Math.max(0, 16 - (e - n)), o = setTimeout(() => {
      t(e + r);
    }, r);
    return n = e + r, o;
  };
}
function K() {
  if (typeof window > "u")
    return () => 0;
  if (window.requestAnimationFrame)
    return window.requestAnimationFrame.bind(window);
  const n = D.filter((t) => `${t}RequestAnimationFrame` in window)[0];
  return n ? window[`${n}RequestAnimationFrame`] : V();
}
K();
g("");
function W() {
  const n = 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 u of e)
    if (u.test(n))
      return !1;
  for (const u of t)
    if (u.test(n))
      return !0;
  const r = "ontouchstart" in window || navigator.maxTouchPoints > 0, o = screen.width, a = screen.height, s = Math.min(o, a);
  return !!(r && s <= 768);
}
const N = /* @__PURE__ */ R({
  name: "Notify",
  props: j,
  emits: ["close", "empty"],
  setup(n, t) {
    var C;
    const e = W(), o = `farris-notify-${(C = n.options) != null && C.type ? n.options.type : "info"}}`, a = c(() => ({
      "farris-notify": !0,
      [o]: e
    })), s = {
      left: 12,
      right: 12,
      top: 20,
      bottom: 12
    }, u = g(), d = g(n.options), m = g(n.showCloseButton), f = c(() => n.position || "bottom-right"), y = c(() => n.timeout != null ? n.timeout : 3e3), b = c(() => {
      const p = n.bottom ? n.bottom : s.bottom, v = n.top ? n.top : s.top, i = {
        transition: "all 0.2s ease",
        left: f.value.indexOf("left") > -1 ? `${n.left ? n.left : s.left}px` : "",
        right: f.value.indexOf("right") > -1 ? `${n.right ? n.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 T(p, v) {
      h();
    }
    return () => {
      var p;
      return e ? l("div", {
        class: a.value,
        ref: u
      }, [(p = n.options) == null ? void 0 : p.message]) : l("div", {
        class: a.value,
        style: b.value,
        ref: u
      }, [l(I, {
        options: d.value,
        showCloseButton: m.value,
        animate: n.animate,
        onClose: (v) => T(v, d.value)
      }, null)]);
    };
  }
});
class Y {
  constructor() {
    x(this, "notifyRefs", []);
    x(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, o = Object.assign({
      timeout: 3e3,
      position: "bottom-right",
      showCloseButton: !0,
      safeHtml: !0
    }, this.globalConfig, {
      ...t
    }), a = document.createElement("div");
    a.style.display = "contents";
    const s = A({
      setup() {
        var m;
        const u = g();
        function d() {
          u.value.container.style.transform = "scale(0)", setTimeout(() => {
            e.updateNotifyPositionForClose(o, u), s.unmount();
          }, 220);
        }
        if (o.position.indexOf("top") > -1) {
          const f = e.getNotifyInstances(o.position), y = f[f.length - 1];
          if (y) {
            const b = y.value.container.getBoundingClientRect();
            o.top = b.bottom;
          }
        }
        return o.safeHtml && ((m = o.options) != null && m.message) && (o.options.message = e.escapeAllHtml(o.options.message)), E(() => {
          document.body.removeChild(a);
        }), $(() => {
          e.updateNotifyPositionForCreate(o, u);
        }), () => l(L, {
          mode: "out-in",
          name: "fade",
          appear: !0
        }, {
          default: () => [l(N, _({
            ref: u
          }, o, {
            onClose: d
          }), 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((o) => {
        const a = o.value.container.getBoundingClientRect();
        o.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 o = this.getNotifyInstances(t.position), a = o.indexOf(e);
      o.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 = "", o = "", a, s, u;
    typeof e == "string" ? r = e : e && (r = e.message || "", o = e.title || "", s = e.position || null, u = e.showCloseButton != null ? e.showCloseButton : null, a = e.timeout != null ? e.timeout : null);
    const m = {
      options: {
        type: t,
        message: r,
        title: o
      }
    };
    return s != null && (m.position = s), u != null && (m.showCloseButton = u), a != null && (m.timeout = a), m;
  }
  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 = (n) => {
  n.component(N.name, N), n.component(I.name, I);
  const t = new Y();
  n.provide(z, t), n.provide("FNotifyService", t);
};
export {
  N as FNotify,
  Y as FNotifyService,
  I as FToast,
  z as F_NOTIFY_SERVICE_TOKEN,
  N as default,
  j as notifyProps,
  q as toastProps
};