@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
193 lines (192 loc) • 7.64 kB
JavaScript
import { defineComponent as H, ref as o, computed as I, onMounted as k, watch as j, createVNode as c, Fragment as D, createApp as E, onUnmounted as G, mergeProps as U } from "vue";
const V = {
/** 是否展示文案 */
showMessage: { type: Boolean, default: !0 },
/** 展示信息 */
message: { type: String, default: "加载中，请稍后..." },
/** 默认展示状态,方便通过按钮点击控制loading */
isActive: { type: Boolean, default: !1 },
/** 图标大小 */
width: { type: Number, default: 30 },
/** 图标样式 */
type: { type: Number, default: 0 },
/** 指定父元素 */
target: { type: Object, default: null },
// 父元素比如body可能有默认的position是absolute，所以默认属性不设值
targetPosition: { type: String, default: "" },
/** 延迟300毫秒,解决异步加载出现一闪而逝的问题*/
delay: { type: Number, default: 300 }
}, Y = [
'<div class="f-loading-round"></div>',
`<div class="f-loading-dot-wrapper">
<div class="f-loading-dot">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
</div>
</div>`,
'<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-coffee"><defs><linearGradient id="gradient" x1="0%" x2="0%" y1="0%" y2="100%"><stop offset="10%" stop-color="black" stop-opacity="0"></stop><stop offset="100%" stop-color="white" stop-opacity="1"></stop></linearGradient><mask id="mask" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"><rect x="22" y="8" width="56" height="54" fill="url(#gradient)"></rect></mask><path id="steam" d="M0-4c-2.1,2.6-2.1,6.4,0,9l0,0c2.1,2.6,2.1,6.4,0,9l0,0c-2.1,2.6-2.1,6.4,0,9l0,0c2.1,2.6,2.1,6.4,0,9l0,0 c-2.1,2.6-2.1,6.4,0,9l0,0c2.1,2.6,2.1,6.4,0,9c-2.1,2.6-2.1,6.4,0,9l0,0c2.1,2.6,2.1,6.4,0,9l0,0c-2.1,2.6-2.1,6.4,0,9l0,0 c2.1,2.6,2.1,6.4,0,9l0,0c-2.1,2.6-2.1,6.4,0,9l0,0c2.1,2.6,2.1,6.4,0,9c-2.1,2.6-2.1,6.4,0,9l0,0c2.1,2.6,2.1,6.4,0,9l0,0 c-2.1,2.6-2.1,6.4,0,9h0c2.1,2.6,2.1,6.4,0,9h0c-2.1,2.6-2.1,6.4,0,9h0c2.1,2.6,2.1,6.4,0,9" stroke-width="6" stroke-linecap="round" fill="#f00" stroke="#58a8f6"></path></defs><g mask="url(#mask)"><use x="29" y="1.00876" href="#steam"><animate attributeName="y" calcMode="linear" values="4;-14" keyTimes="0;1" dur="0.5" begin="0s" repeatCount="indefinite"></animate></use><use x="47" y="-5.98248" href="#steam"><animate attributeName="y" calcMode="linear" values="0;-18" keyTimes="0;1" dur="0.25" begin="0s" repeatCount="indefinite"></animate></use><use x="64" y="-8.48686" href="#steam"><animate attributeName="y" calcMode="linear" values="-4;-22" keyTimes="0;1" dur="0.3333333333333333" begin="0s" repeatCount="indefinite"></animate></use></g><path d="M81.2,52.5l-5.2,0V49c0-1.6-1.3-3-3-3H20c-1.6,0-3,1.3-3,3v11.6C17,71.3,25.7,80,36.5,80h20.1 c7.1,0,13.3-3.8,16.7-9.5h8.3c5.2,0,9.3-4.4,9-9.6C90.2,56.1,86,52.5,81.2,52.5z M81.5,67.5h-6.8c0.8-2.2,1.3-4.5,1.3-7v-5h5.5 c3.3,0,6,2.7,6,6S84.8,67.5,81.5,67.5z" fill="#58a8f6"></path><path d="M78.8,88H19.2c-1.1,0-2-0.9-2-2s0.9-2,2-2h59.5c1.1,0,2,0.9,2,2S79.9,88,78.8,88z" fill="rgba(80.78431372549018%,94.50980392156862%,72.15686274509802%,0)"></path></svg>'
], m = /* @__PURE__ */ H({
name: "FLoading",
props: V,
emits: ["closed", "hidden"],
setup(e, n) {
const a = Y, l = o(e.showMessage), i = o(e.isActive), u = o(e.message), v = o(e.width), s = o(e.type), f = o(null), d = o(null), p = o(!1);
let h = "", g;
const M = I(() => s.value && s.value in [0, 1, 2] ? s.value : 0);
k(() => {
w();
});
const S = I(() => {
const t = {
visibility: p.value ? "visible" : "hidden",
transform: "translate(-50%,-50%)"
};
return e.target === document.body && (t.position = "fixed"), t;
});
function w() {
i.value && !g && (g = setTimeout(() => {
g = null, P(), p.value = !0;
}, e.delay)), i.value || g && (clearTimeout(g), g = null);
}
function C(t) {
h = t;
}
function A() {
return h;
}
function x(t = () => {
}) {
i.value = !1, p.value = !1, n.emit("closed", {
loadingId: h,
callback: t
});
}
function P() {
const t = T();
f.value && f.value.style && (f.value.style.zIndex = (t + 1).toString()), d.value && d.value.style && (d.value.style.zIndex = (t + 1).toString());
}
function T(t = 1) {
const N = ["body>.f-datagrid-settings-simple-host", "body>div", "body>farris-dialog>.farris-modal.show", "body>.farris-modal.show", "body>farris-filter-panel>.f-filter-panel-wrapper", "body .f-sidebar-show>.f-sidebar-main", "body>.popover.show", "body>filter-row-panel>.f-datagrid-filter-panel", "body>.f-section-maximize"], F = Array.from(document.body.querySelectorAll(N.join(","))).filter((y) => y).map((y) => {
const {
display: O,
zIndex: B
} = window.getComputedStyle(y);
return O === "none" ? 0 : parseInt(B, 10);
}).filter((y) => y);
let b = Math.max(...F);
return b < 1040 && (b = 1040), b + t;
}
n.expose({
close: x,
setLoadingId: C,
getLoadingId: A
}), j(() => e.isActive, (t) => {
i.value = t, w(), t || x();
});
function z(t) {
t.stopPropagation();
}
return () => c(D, null, [i.value && c("div", {
ref: f,
onClick: z,
class: "farris-loading-backdrop loading-wait"
}, null), i.value && c("div", {
ref: d,
class: "farris-loading",
style: S.value
}, [c("div", {
class: "ng-busy-default-wrapper"
}, [c("div", {
class: "ng-busy-default-sign"
}, [c("div", {
style: [{
display: "inline-block"
}, {
margin: "4px"
}, {
width: v.value + "px"
}, {
height: v.value + "px"
}],
innerHTML: a[M.value]
}, null), l.value && c("div", {
class: "ng-busy-default-text",
style: "margin-left:0;",
innerHTML: u.value
}, null)])])])]);
}
});
let L = -1;
const r = {};
function q(e) {
const n = document.createElement("div"), a = e.target || document.body, l = !!e.targetPosition;
let i = "unset";
if (l) {
const {
position: s
} = window.getComputedStyle(a);
i = s, a.style.position = e.targetPosition;
}
const u = Z();
L = u;
const v = E({
setup() {
const s = o();
G(() => {
l && (a.style.position = i), n.remove();
}), k(() => {
s.value && s.value.setLoadingId(u);
});
function f(d) {
v.unmount(), d.callback && d.callback(), delete r[d.loadingId];
}
return r[u] = s, () => c(m, U({
ref: s
}, e, {
onClosed: f
}), null);
}
});
return a.style = a.style ? a.style : {}, a.appendChild(n), v.mount(n), r[u];
}
function R() {
const e = Object.keys(r).map((n) => parseInt(n, 10));
return e.length ? Math.max(...e) : 0;
}
function Z() {
return R() + 1;
}
class _ {
static show(n) {
const a = {
isActive: !0,
target: document.body,
targetPosition: "",
...n
};
return q(a);
}
static close(n, a = () => {
}) {
const i = r[n || L];
i && i.value.close(a);
}
static clearAll() {
const n = Object.keys(r);
n.length && n.forEach((a) => {
const l = r[a];
l && l.value.close();
});
}
}
m.install = (e) => {
e.component(m.name, m), e.provide("FLoadingService", _);
};
export {
m as FLoading,
_ as FLoadingService,
m as default,
V as loadingProps
};