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