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