@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
182 lines (181 loc) • 7.42 kB
JavaScript
import { defineComponent as O, ref as d, computed as x, onMounted as I, watch as H, createVNode as c, Fragment as j, createApp as B, onUnmounted as D, mergeProps as E } from "vue";
const G = {
/** 是否展示文案 */
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 }
}, U = [
'<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>'
], v = /* @__PURE__ */ O({
name: "FLoading",
props: G,
emits: ["closed", "hidden"],
setup(e, t) {
const n = U, o = d(e.showMessage), a = d(e.isActive), u = d(e.message), m = d(e.width), s = d(e.type), f = d(null), l = d(null);
let p = "", g;
const M = x(() => s.value && s.value in [0, 1, 2] ? s.value : 0);
I(() => {
b();
});
const S = x(() => "transform:translate(-50%,-50%);" + (e.target === document.body ? "position:fixed" : ""));
function b() {
a.value && !g && (g = setTimeout(() => {
g = null, A();
}, e.delay)), a.value || g && (clearTimeout(g), g = null);
}
function L(i) {
p = i;
}
function C() {
return p;
}
function w(i = () => {
}) {
a.value = !1, t.emit("closed", {
loadingId: p,
callback: i
});
}
function A() {
const i = T();
f.value && f.value.style && (f.value.style.zIndex = (i + 1).toString()), l.value && l.value.style && (l.value.style.zIndex = (i + 1).toString());
}
function T(i = 1) {
const z = ["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"], N = Array.from(document.body.querySelectorAll(z.join(","))).filter((y) => y).map((y) => {
const {
display: P,
zIndex: F
} = window.getComputedStyle(y);
return P === "none" ? 0 : parseInt(F, 10);
}).filter((y) => y);
let h = Math.max(...N);
return h < 1040 && (h = 1040), h + i;
}
return t.expose({
close: w,
setLoadingId: L,
getLoadingId: C
}), H(() => e.isActive, (i) => {
a.value = i, b(), i || w();
}), () => c(j, null, [a.value && c("div", {
ref: f,
class: "farris-loading-backdrop loading-wait"
}, null), a.value && c("div", {
ref: l,
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: m.value + "px"
}, {
height: m.value + "px"
}],
innerHTML: n[M.value]
}, null), o.value && c("div", {
class: "ng-busy-default-text",
style: "margin-left:0;",
innerHTML: u.value
}, null)])])])]);
}
});
let k = -1;
const r = {};
function V(e) {
const t = document.createElement("div"), n = e.target || document.body, o = !!e.targetPosition;
let a = "unset";
if (o) {
const {
position: s
} = window.getComputedStyle(n);
a = s, n.style.position = e.targetPosition;
}
const u = q();
k = u;
const m = B({
setup() {
const s = d();
D(() => {
o && (n.style.position = a), t.remove();
}), I(() => {
s.value && s.value.setLoadingId(u);
});
function f(l) {
m.unmount(), l.callback && l.callback(), delete r[l.loadingId];
}
return r[u] = s, () => c(v, E({
ref: s
}, e, {
onClosed: f
}), null);
}
});
return n.style = n.style ? n.style : {}, n.appendChild(t), m.mount(t), r[u];
}
function Y() {
const e = Object.keys(r).map((t) => parseInt(t, 10));
return e.length ? Math.max(...e) : 0;
}
function q() {
return Y() + 1;
}
class R {
static show(t) {
const n = {
isActive: !0,
target: document.body,
targetPosition: "",
...t
};
return V(n);
}
static close(t, n = () => {
}) {
const a = r[t || k];
a && a.value.close(n);
}
static clearAll() {
const t = Object.keys(r);
t.length && t.forEach((n) => {
const o = r[n];
o && o.value.close();
});
}
}
v.install = (e) => {
e.component(v.name, v), e.provide("FLoadingService", R);
};
export {
v as FLoading,
R as FLoadingService,
v as default,
G as loadingProps
};