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