@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
244 lines (243 loc) • 9.08 kB
JavaScript
import { defineComponent as H, ref as d, computed as k, onMounted as M, watch as j, createVNode as f, Fragment as E, createApp as G, onUnmounted as U, mergeProps as V } from "vue";
import { LocaleService as I } from "../locale/index.esm.js";
function Y() {
function e() {
if (typeof navigator > "u" || typeof window > "u" || typeof screen > "u")
return !1;
const t = navigator.userAgent || navigator.vendor || window.opera, i = [
/iPhone/i,
/iPod/i,
/Android.*Mobile/i,
// Android 手机通常包含 "Mobile" 字样，而平板不包含
/webOS/i,
/BlackBerry/i,
/IEMobile/i,
/Opera Mini/i
], o = [
/iPad/i,
/Android(?!.*Mobile)/i,
// Android 平板通常不含 "Mobile"
/Tablet/i,
/PlayBook/i,
/Kindle/i,
/Silk/i
];
for (const l of o)
if (l.test(t))
return !1;
for (const l of i)
if (l.test(t))
return !0;
const a = "ontouchstart" in window || navigator.maxTouchPoints > 0, c = screen.width, u = screen.height, s = Math.min(c, u);
return !!(a && s <= 768);
}
return { isMobilePhone: e };
}
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 }
}, { isMobilePhone: K } = Y(), R = {
showMessage: !0,
message: K() ? "正在加载..." : "正在加载，请稍候...",
isActive: !1,
width: 30,
type: 0,
targetPosition: "",
delay: 300
}, W = [
'<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, t) {
const i = W, o = d(e.showMessage), a = d(e.isActive), c = d(e.message), u = d(e.width), s = d(e.type), l = d(null), r = d(null), y = d(!1);
let g = "", v;
const L = k(() => s.value && s.value in [0, 1, 2] ? s.value : 0);
M(() => {
w();
});
const P = k(() => {
const n = {
visibility: y.value ? "visible" : "hidden",
transform: "translate(-50%,-50%)"
};
return e.target === document.body && (n.position = "fixed"), n;
});
function w() {
a.value && !v && (v = setTimeout(() => {
v = null, T(), y.value = !0;
}, e.delay)), a.value || v && (clearTimeout(v), v = null);
}
function C(n) {
g = n;
}
function A() {
return g;
}
function x(n = () => {
}) {
a.value = !1, y.value = !1, t.emit("closed", {
loadingId: g,
callback: n
});
}
function T() {
const n = z();
l.value && l.value.style && (l.value.style.zIndex = (n + 1).toString()), r.value && r.value.style && (r.value.style.zIndex = (n + 1).toString());
}
function z(n = 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"], O = Array.from(document.body.querySelectorAll(N.join(","))).filter((p) => p).map((p) => {
const {
display: D,
zIndex: F
} = window.getComputedStyle(p);
return D === "none" ? 0 : parseInt(F, 10);
}).filter((p) => p);
let b = Math.max(...O);
return b < 1040 && (b = 1040), b + n;
}
t.expose({
close: x,
setLoadingId: C,
getLoadingId: A
}), j(() => e.isActive, (n) => {
a.value = n, w(), n || x();
});
function B(n) {
n.stopPropagation();
}
return () => f(E, null, [a.value && f("div", {
ref: l,
onClick: B,
class: "farris-loading-backdrop loading-wait"
}, null), a.value && f("div", {
ref: r,
class: "farris-loading",
style: P.value
}, [f("div", {
class: "ng-busy-default-wrapper"
}, [f("div", {
class: "ng-busy-default-sign"
}, [f("div", {
style: [{
display: "inline-block"
}, {
margin: "4px"
}, {
width: u.value + "px"
}, {
height: u.value + "px"
}],
innerHTML: i[L.value]
}, null), o.value && f("div", {
class: "ng-busy-default-text",
style: "margin-left:0;",
innerHTML: c.value
}, null)])])])]);
}
});
let S = -1;
const m = {};
function Z(e) {
const t = document.createElement("div"), i = e.target || document.body, o = !!e.targetPosition;
let a = "unset";
if (o) {
const {
position: s
} = window.getComputedStyle(i);
a = s, i.style.position = e.targetPosition;
}
const c = J();
S = c;
const u = G({
setup() {
const s = d(e.message);
s.value === "正在加载，请稍候..." && (s.value = I.getLocaleValue("loading.message"));
const l = {
...e,
message: s.value
}, r = d();
U(() => {
o && (i.style.position = a), t.remove();
}), M(() => {
r.value && r.value.setLoadingId(c);
});
function y(g) {
u.unmount(), g.callback && g.callback(), delete m[g.loadingId];
}
return m[c] = r, () => f(h, V({
ref: r
}, l, {
onClosed: y
}), null);
}
});
return i.style = i.style ? i.style : {}, i.appendChild(t), u.use(I.i18n), u.mount(t), m[c];
}
function _() {
const e = Object.keys(m).map((t) => parseInt(t, 10));
return e.length ? Math.max(...e) : 0;
}
function J() {
return _() + 1;
}
class Q {
static show(t) {
const o = {
...{
...R,
isActive: !0,
target: document.body,
targetPosition: ""
},
...t
};
return Z(o);
}
static close(t, i = () => {
}) {
const a = m[t || S];
a && a.value.close(i);
}
static clearAll() {
const t = Object.keys(m);
t.length && t.forEach((i) => {
const o = m[i];
o && o.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
};