custom-components-wr
Version:
813 lines (812 loc) • 31.4 kB
JavaScript
import { openBlock as c, createElementBlock as f, normalizeClass as T, Fragment as b, renderList as I, normalizeStyle as v, createCommentVNode as x, createElementVNode as m, toDisplayString as N, unref as q, getCurrentScope as G, onScopeDispose as X, watch as K, withModifiers as J, withDirectives as Y, vModelText as $, pushScopeId as ee, popScopeId as te, createTextVNode as le, renderSlot as D, h as oe, resolveComponent as ie } from "vue";
const O = (e, t) => {
const l = e.__vccOpts || e;
for (const [o, n] of t)
l[o] = n;
return l;
}, se = {
name: "pie3d",
props: {
data: {
type: Array,
default: []
//[{title:'title1',value:2},{title:'title2',value:3},{title:'title3',value:1},{title:'title4',value:0.5}]
},
color: {
type: Array,
default: ["#46ABFA", "#6344C1", "#00CB6C", "#0A00FF", "#FF693E", "#E8FF00"]
},
deep: {
type: Number,
default: 40
},
ece: {
type: Number,
default: 0.6
},
titleSize: {
type: Number,
default: 14
}
},
data() {
return {
width: 400,
height: 400,
loading: !0,
hoverIndex: null,
clickIndex: null
};
},
computed: {
effectData() {
return this.data ? this.data.filter((e) => e.value) : [];
},
center() {
return [this.width / 2, this.height / 2];
},
ellipse() {
return [this.width / 4, this.height / 4 * this.ece];
},
wholeValue() {
return this.data.reduce((e, t) => e + t.value, 0);
},
transformStyle() {
if (this.clickIndex === 0 || this.clickIndex) {
const e = this.pie[this.clickIndex].style;
return { transform: `translate(${e[0]}px,${e[1]}px)`, opacity: "1 !important" };
} else
return {};
},
pie() {
if (this.loading)
return [];
if (this.effectData.length) {
let e = [], t = 0, l = 0, o = 0, n = [this.center[0], this.center[1] - this.ellipse[1]], i = [0, 0], s = [0, 0], u = null, r = null, p = null, g = null, C = null;
return this.effectData.forEach((d, a) => {
if (l = a + 1 == this.effectData.length ? 360 : t + d.value / this.wholeValue * 360, i = this.getLocationOnEllipse(l), o = (t + l) / 2, o > 90 && o < 270 ? s = this.getLocationOnEllipse(o, this.deep / 2) : s = this.getLocationOnEllipse(o), t >= 90 && t <= 270 || l >= 90 && l <= 270 || o >= 90 && o <= 270) {
let h = [];
t < 90 ? h = [
[this.center[0] + this.ellipse[0], this.center[1]],
[this.center[0] + this.ellipse[0], this.center[1] + this.deep]
] : h = [
[n[0], n[1]],
[n[0], n[1] + this.deep]
], l > 270 ? (h.push([this.center[0] - this.ellipse[0], this.center[1] + this.deep]), h.push([this.center[0] - this.ellipse[0], this.center[1]])) : (h.push([i[0], i[1] + this.deep]), h.push([i[0], i[1]])), r = "M " + h[0][0] + " " + h[0][1] + " L " + h[1][0] + " " + h[1][1] + " A " + (this.ellipse[0] + 1) + " " + (this.ellipse[1] - 1) + " 0 0 1 " + h[2][0] + " " + h[2][1] + " L " + h[3][0] + " " + h[3][1] + " A " + (this.ellipse[0] + 1) + " " + (this.ellipse[1] - 1) + " 0 0 0 " + h[0][0] + " " + h[0][1] + " Z";
} else
r = null;
l != 360 ? p = "M " + this.center[0] + " " + (this.center[1] + this.deep) + " L " + this.center[0] + " " + this.center[1] + " L " + i[0] + " " + i[1] + " L " + i[0] + " " + (i[1] + this.deep) + " Z" : p = null, u = this.getOffsetLocation(o), a === 0 ? p = [null, p] : p = [e[a - 1].inSidePath[1], p];
let y = [
[s[0] + u[0], s[1] + u[1]]
];
const U = o > 0 && o < 180 ? Math.abs(o == 90 ? 0 : Math.cos(o * Math.PI / 180)) : Math.abs(o == 270 ? 0 : Math.cos(o * Math.PI / 180)), Z = o > 0 && o < 180 ? o > 90 ? (o - 90) / 4 + 90 : (90 - o) / 2 + o : o > 270 ? (o - 270) / 4 + 270 : (270 - o) / 2 + o, P = this.getOffsetLocation(Z, U * this.width / 6);
let w = [y[0][0] + P[0], y[0][1] + P[1]];
if (a > 0) {
if (o < 180) {
const h = w[1] - e[a - 1].textL[1] + 5;
h < this.titleSize + 2 && (w[1] = this.titleSize - h + w[1] + 2);
} else if (e[a - 1].middle > 180) {
const h = Math.abs(w[1] - e[a - 1].textL[1] + 5);
h < this.titleSize + 2 && (w[1] = w[1] - (this.titleSize - h) - 2);
}
}
if (o > 0 && o < 180)
C = [w[0] + 5, w[1] + 5];
else {
const h = this.getTextWidth(d.title, this.titleSize + "px");
C = [w[0] - h - 5, w[1] + 5];
}
y.push(w), g = "M " + s[0] + " " + s[1];
for (let h = 0; h < y.length; h++)
g += " L " + y[h][0] + " " + y[h][1];
let k = { title: d.title, from: t, to: l, fromL: n, linePath: g, toL: i, textL: C, sidePath: r, inSidePath: p, middleL: s, style: u, middle: o, color: d.color || this.getColor(a) };
k.darkerColor = this.getDarkerColor(k.color), k.darkestColor = this.getDarkerColor(k.color, 2), e.push(k), t = l, n = i;
}), e.sort(
(d, a) => d.middleL[1] - a.middleL[1]
), e;
} else
return [];
},
onHover() {
return this.hoverIndex === 0 || this.hoverIndex;
}
},
mounted() {
this.init();
},
methods: {
init() {
this.$nextTick(() => {
var t;
const e = (t = this.$refs.mainRef) == null ? void 0 : t.parentNode;
e && (e.clientWidth > e.clientHeight ? this.width = e.clientHeight : this.width = e.clientWidth, this.height = this.width, this.loading = !1);
});
},
//传入色值，返回一个相对深色的色值
getDarkerColor(e, t = 1) {
let l = e;
l.indexOf("#") === 0 && (l = l.slice(1));
let o = parseInt(l.slice(0, 2), 16), n = parseInt(l.slice(2, 4), 16), i = parseInt(l.slice(4, 6), 16);
return o = o, n = n - 20 * t, i = i - 20 * t, o = o < 0 ? 0 : o, n = n < 0 ? 0 : n, i = i < 0 ? 0 : i, "rgb(" + o + "," + n + "," + i + ")";
},
//写一个方法，获取随机颜色
getRandomColor() {
let e = Math.floor(Math.random() * 256), t = Math.floor(Math.random() * 256), l = Math.floor(Math.random() * 256);
return `rgb(${e},${t},${l})`;
},
getColor(e) {
let t = e % this.color.length;
return this.color[t];
},
getLocationByAngleAndRadius(e, t) {
let l = this.center[0] + t * Math.cos(e * Math.PI / 180), o = this.center[1] + t * Math.sin(e * Math.PI / 180);
return [l, o];
},
//已知椭圆的长轴、短轴、圆心、角度，求椭圆上的点
getLocationOnEllipse(e, t = 0) {
let l = this.center[0] + this.ellipse[0] * Math.cos((e - 90) * Math.PI / 180), o = this.center[1] + t + this.ellipse[1] * Math.sin((e - 90) * Math.PI / 180);
return [l, o];
},
//已知偏移角度和偏移量，求偏移的x,y
getOffsetLocation(e, t = this.deep / 2) {
let l = t * Math.cos((e - 90) * Math.PI / 180), o = t * Math.sin((e - 90) * Math.PI / 180);
return [l, o];
},
getTextWidth(e, t = "14px") {
const l = document.createElement("span");
l.style.cssText = "font-size: " + t + "; font-weight: blod; white-space: nowrap;", l.style.visibility = "hidden", l.style.position = "absolute", l.textContent = e, document.body.appendChild(l);
const o = l.offsetWidth;
return document.body.removeChild(l), o;
},
//鼠标事件
mouseenter(e) {
this.hoverIndex = e;
},
mouseleave(e) {
this.hoverIndex === e && (this.hoverIndex = null);
},
clickPie(e) {
this.clickIndex !== e ? this.clickIndex = e : this.clickIndex = null;
}
}
}, ne = ["width", "height", "viewBox"], re = ["onMouseenter", "onMouseleave", "onClick"], de = { key: 0 }, ae = ["d", "fill"], he = ["d", "fill"], ue = ["d", "fill"], ce = { key: 1 }, fe = ["d", "fill"], pe = ["cx", "cy", "rx", "ry", "fill"], me = { key: 2 }, ge = ["d", "fill"], ye = ["d", "stroke"], ve = ["x", "y"];
function we(e, t, l, o, n, i) {
return c(), f("svg", {
class: T(["myPie", i.onHover ? "hoverPie" : ""]),
ref: "mainRef",
width: n.width,
height: n.height,
viewBox: "0 0 " + n.width + " " + n.height,
xmlns: "http://www.w3.org/2000/svg"
}, [
(c(!0), f(b, null, I(i.pie, (s, u) => (c(), f("g", {
onMouseenter: (r) => i.mouseenter(u),
onMouseleave: (r) => i.mouseleave(u),
onClick: (r) => i.clickPie(u),
style: v(n.clickIndex === u ? i.transformStyle : {})
}, [
i.effectData.length && i.effectData.length > 1 ? (c(), f("g", de, [
s.middle < 180 && s.inSidePath[0] ? (c(), f("path", {
key: 0,
d: s.inSidePath[0],
fill: s.darkestColor
}, null, 8, ae)) : x("", !0),
s.inSidePath[1] ? (c(), f("path", {
key: 1,
d: s.inSidePath[1],
fill: s.darkestColor
}, null, 8, he)) : x("", !0),
!(s.middle < 180) && s.inSidePath[0] ? (c(), f("path", {
key: 2,
d: s.inSidePath[0],
fill: s.darkestColor
}, null, 8, ue)) : x("", !0)
])) : x("", !0),
i.effectData.length ? (c(), f("g", ce, [
i.effectData.length > 1 ? (c(), f("path", {
key: 0,
d: "M " + i.center[0] + " " + i.center[1] + " L " + s.fromL[0] + " " + s.fromL[1] + " A " + i.ellipse[0] + " " + i.ellipse[1] + " 0 " + (s.to - s.from > 180 ? "1" : "0") + " 1 " + s.toL[0] + " " + s.toL[1] + " Z",
fill: s.color
}, null, 8, fe)) : (c(), f("ellipse", {
key: 1,
cx: i.center[0],
cy: i.center[1],
rx: i.ellipse[0],
ry: i.ellipse[1],
fill: s.color
}, null, 8, pe))
])) : x("", !0),
s.sidePath ? (c(), f("g", me, [
m("path", {
d: s.sidePath,
fill: s.darkerColor
}, null, 8, ge)
])) : x("", !0),
m("g", null, [
m("path", {
d: s.linePath,
"stroke-width": "2",
stroke: s.color,
fill: "none"
}, null, 8, ye),
s.textL ? (c(), f("text", {
key: 0,
x: s.textL[0],
y: s.textL[1]
}, N(s.title), 9, ve)) : x("", !0)
])
], 44, re))), 256))
], 10, ne);
}
const Ce = /* @__PURE__ */ O(se, [["render", we], ["__scopeId", "data-v-31ec9764"]]);
var W;
const B = typeof window < "u", xe = (e) => typeof e == "string", V = () => {
}, be = B && ((W = window == null ? void 0 : window.navigator) == null ? void 0 : W.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
function F(e) {
return typeof e == "function" ? e() : q(e);
}
function ke(e) {
return e;
}
function Ie(e) {
return G() ? (X(e), !0) : !1;
}
function _(e) {
var t;
const l = F(e);
return (t = l == null ? void 0 : l.$el) != null ? t : l;
}
const H = B ? window : void 0;
function M(...e) {
let t, l, o, n;
if (xe(e[0]) || Array.isArray(e[0]) ? ([l, o, n] = e, t = H) : [t, l, o, n] = e, !t)
return V;
Array.isArray(l) || (l = [l]), Array.isArray(o) || (o = [o]);
const i = [], s = () => {
i.forEach((g) => g()), i.length = 0;
}, u = (g, C, d, a) => (g.addEventListener(C, d, a), () => g.removeEventListener(C, d, a)), r = K(() => [_(t), F(n)], ([g, C]) => {
s(), g && i.push(...l.flatMap((d) => o.map((a) => u(g, d, a, C))));
}, { immediate: !0, flush: "post" }), p = () => {
r(), s();
};
return Ie(p), p;
}
let S = !1;
function Q(e, t, l = {}) {
const { window: o = H, ignore: n = [], capture: i = !0, detectIframe: s = !1 } = l;
if (!o)
return;
be && !S && (S = !0, Array.from(o.document.body.children).forEach((d) => d.addEventListener("click", V)));
let u = !0;
const r = (d) => n.some((a) => {
if (typeof a == "string")
return Array.from(o.document.querySelectorAll(a)).some((y) => y === d.target || d.composedPath().includes(y));
{
const y = _(a);
return y && (d.target === y || d.composedPath().includes(y));
}
}), g = [
M(o, "click", (d) => {
const a = _(e);
if (!(!a || a === d.target || d.composedPath().includes(a))) {
if (d.detail === 0 && (u = !r(d)), !u) {
u = !0;
return;
}
t(d);
}
}, { passive: !0, capture: i }),
M(o, "pointerdown", (d) => {
const a = _(e);
a && (u = !d.composedPath().includes(a) && !r(d));
}, { passive: !0 }),
s && M(o, "blur", (d) => {
var a;
const y = _(e);
((a = o.document.activeElement) == null ? void 0 : a.tagName) === "IFRAME" && !(y != null && y.contains(o.document.activeElement)) && t(d);
})
].filter(Boolean);
return () => g.forEach((d) => d());
}
const L = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, E = "__vueuse_ssr_handlers__";
L[E] = L[E] || {};
var R;
(function(e) {
e.UP = "UP", e.RIGHT = "RIGHT", e.DOWN = "DOWN", e.LEFT = "LEFT", e.NONE = "NONE";
})(R || (R = {}));
var _e = Object.defineProperty, z = Object.getOwnPropertySymbols, Te = Object.prototype.hasOwnProperty, De = Object.prototype.propertyIsEnumerable, A = (e, t, l) => t in e ? _e(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, Oe = (e, t) => {
for (var l in t || (t = {}))
Te.call(t, l) && A(e, l, t[l]);
if (z)
for (var l of z(t))
De.call(t, l) && A(e, l, t[l]);
return e;
};
const Me = {
easeInSine: [0.12, 0, 0.39, 0],
easeOutSine: [0.61, 1, 0.88, 1],
easeInOutSine: [0.37, 0, 0.63, 1],
easeInQuad: [0.11, 0, 0.5, 0],
easeOutQuad: [0.5, 1, 0.89, 1],
easeInOutQuad: [0.45, 0, 0.55, 1],
easeInCubic: [0.32, 0, 0.67, 0],
easeOutCubic: [0.33, 1, 0.68, 1],
easeInOutCubic: [0.65, 0, 0.35, 1],
easeInQuart: [0.5, 0, 0.75, 0],
easeOutQuart: [0.25, 1, 0.5, 1],
easeInOutQuart: [0.76, 0, 0.24, 1],
easeInQuint: [0.64, 0, 0.78, 0],
easeOutQuint: [0.22, 1, 0.36, 1],
easeInOutQuint: [0.83, 0, 0.17, 1],
easeInExpo: [0.7, 0, 0.84, 0],
easeOutExpo: [0.16, 1, 0.3, 1],
easeInOutExpo: [0.87, 0, 0.13, 1],
easeInCirc: [0.55, 0, 1, 0.45],
easeOutCirc: [0, 0.55, 0.45, 1],
easeInOutCirc: [0.85, 0, 0.15, 1],
easeInBack: [0.36, 0, 0.66, -0.56],
easeOutBack: [0.34, 1.56, 0.64, 1],
easeInOutBack: [0.68, -0.6, 0.32, 1.6]
};
Oe({
linear: ke
}, Me);
const Pe = {
name: "colorpicker",
props: {
modelValue: "",
defaultColor: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: !1
},
transfer: {
type: Boolean,
default: !1
},
zIndex: {
type: Number,
default: null
},
closeable: {
type: Boolean,
default: !1
}
},
emits: ["update:modelValue", "change", "close"],
data() {
return {
openStatus: !1,
hoveColor: "",
// 主题颜色
tColor: ["#000000", "#ffffff", "#eeece1", "#1e497b", "#4e81bb", "#e2534d", "#9aba60", "#8165a0", "#47acc5", "#f9974c"],
// 颜色面板
colorConfig: [
["#7f7f7f", "#f2f2f2"],
["#0d0d0d", "#808080"],
["#1c1a10", "#ddd8c3"],
["#0e243d", "#c6d9f0"],
["#233f5e", "#dae5f0"],
["#632623", "#f2dbdb"],
["#4d602c", "#eaf1de"],
["#3f3150", "#e6e0ec"],
["#1e5867", "#d9eef3"],
["#99490f", "#fee9da"]
],
// 标准颜色
bColor: ["#c21401", "#ff1e02", "#ffc12a", "#ffff3a", "#90cf5b", "#00af57", "#00afee", "#0071be", "#00215f", "#72349d"],
html5Color: this.modelValue,
openScroll: !1,
flashTime: null
};
},
mounted() {
let e = this.$refs.colorPicker;
e && Q(e, this.closePanel);
},
methods: {
openPanel() {
this.openStatus = !this.disabled, this.transfer && this.openStatus && (this.render(), this.openScroll = !0);
},
render() {
this.flashTime = requestAnimationFrame(this.render), this.scrollHandler();
},
setPositon() {
var t;
let e = (t = this.$refs.smallBlocksRef) == null ? void 0 : t.getBoundingClientRect();
if (e) {
let l = this.$refs.colorTray;
l.style.left = e.left + "px", l.style.top = e.top + e.height + 2 + "px";
}
},
scrollHandler() {
this.transfer && this.openStatus && this.setPositon();
},
closePanel() {
this.openScroll && (cancelAnimationFrame(this.flashTime), this.openScroll = !1), this.openStatus = !1;
},
closePicker() {
this.$emit("close");
},
handleOver(e) {
this.hoveColor = e;
},
triggerHtml5Color() {
var e;
(e = this.$refs.html5ColorEl) == null || e.click();
},
updataValue(e) {
this.$emit("update:modelValue", e), this.$emit("change", e), this.closePanel();
},
handleDefaultColor() {
this.updataValue(this.defaultColor);
},
//工具方法
parseColor(e) {
return e.length === 4 ? e = "#" + e[1] + e[1] + e[2] + e[2] + e[3] + e[3] : e;
},
rgbToHex(e, t, l) {
const o = (e << 16 | t << 8 | l).toString(16);
return "#" + new Array(Math.abs(o.length - 7)).join("0") + o;
},
hexToRgb(e) {
e = this.parseColor(e);
let t = [];
for (let l = 1; l < 7; l += 2)
t.push(parseInt("0x" + e.slice(l, l + 2)));
return t;
},
gradient(e, t, l) {
let o = this.hexToRgb(e), n = this.hexToRgb(t), i = (n[0] - o[0]) / l, s = (n[1] - o[1]) / l, u = (n[2] - o[2]) / l, r = [];
for (let p = 0; p < l; p++)
r.push(this.rgbToHex(i * p + o[0], s * p + o[1], u * p + o[2]));
return r;
}
},
computed: {
showPanelColor() {
return this.hoveColor ? this.hoveColor : this.showColor;
},
showColor() {
return this.modelValue ? this.modelValue : this.defaultColor;
},
colorPanel() {
let e = [];
for (let t of this.colorConfig)
e.push(this.gradient(t[1], t[0], 5));
return e;
}
}
}, j = (e) => (ee("data-v-f1561d7b"), e = e(), te(), e), We = { class: "hd" }, Se = { class: "bd" }, Le = /* @__PURE__ */ j(() => /* @__PURE__ */ m("h3", null, "主题颜色", -1)), Ee = { class: "tColor" }, Re = ["onMouseover", "onClick"], ze = { class: "bColor" }, Ae = ["onMouseover", "onClick"], Ne = /* @__PURE__ */ j(() => /* @__PURE__ */ m("h3", null, "标准颜色", -1)), Be = { class: "tColor" }, Ve = ["onMouseover", "onClick"];
function Fe(e, t, l, o, n, i) {
return c(), f("div", {
class: "m-colorPicker",
ref: "colorPicker",
onClick: t[11] || (t[11] = (s) => {
s.stopPropagation();
}),
style: v(l.closeable ? { padding: "6px 0" } : {})
}, [
m("div", {
class: T(["colorBtn", [{ disabled: l.disabled }, { empty: !i.showColor }]]),
style: v(`background-color: ${i.showColor}`),
onClick: t[1] || (t[1] = (...s) => i.openPanel && i.openPanel(...s)),
ref: "smallBlocksRef"
}, [
l.closeable ? (c(), f("span", {
key: 0,
class: "close",
onClick: t[0] || (t[0] = J((...s) => i.closePicker && i.closePicker(...s), ["stop"]))
}, "X")) : x("", !0)
], 6),
m("div", {
class: T(["box", { open: n.openStatus }]),
ref: "colorTray",
style: v([l.transfer ? { position: "fixed" } : {}, l.zIndex ? { zIndex: l.zIndex } : {}])
}, [
m("div", We, [
m("div", {
class: T(["colorView", [{ empty: !i.showPanelColor }]]),
style: v({ "background-color": i.showPanelColor })
}, null, 6),
m("div", {
class: "defaultColor",
onClick: t[2] || (t[2] = (...s) => i.handleDefaultColor && i.handleDefaultColor(...s)),
onMouseover: t[3] || (t[3] = (s) => i.handleOver(l.defaultColor)),
onMouseout: t[4] || (t[4] = (s) => i.handleOver(""))
}, "默认颜色", 32)
]),
m("div", Se, [
Le,
m("ul", Ee, [
(c(!0), f(b, null, I(n.tColor, (s, u) => (c(), f("li", {
key: u,
style: v({ backgroundColor: s }),
onMouseover: (r) => i.handleOver(s),
onMouseout: t[5] || (t[5] = (r) => i.handleOver("")),
onClick: (r) => i.updataValue(s)
}, null, 44, Re))), 128))
]),
m("ul", ze, [
(c(!0), f(b, null, I(i.colorPanel, (s, u) => (c(), f("li", { key: u }, [
m("ul", null, [
(c(!0), f(b, null, I(s, (r, p) => (c(), f("li", {
key: p,
style: v({ backgroundColor: r }),
onMouseover: (g) => i.handleOver(r),
onMouseout: t[6] || (t[6] = (g) => i.handleOver("")),
onClick: (g) => i.updataValue(r)
}, null, 44, Ae))), 128))
])
]))), 128))
]),
Ne,
m("ul", Be, [
(c(!0), f(b, null, I(n.bColor, (s, u) => (c(), f("li", {
key: u,
style: v({ backgroundColor: s }),
onMouseover: (r) => i.handleOver(s),
onMouseout: t[7] || (t[7] = (r) => i.handleOver("")),
onClick: (r) => i.updataValue(s)
}, null, 44, Ve))), 128))
]),
m("h3", {
onClick: t[8] || (t[8] = (...s) => i.triggerHtml5Color && i.triggerHtml5Color(...s))
}, "更多颜色..."),
Y(m("input", {
type: "color",
ref: "html5ColorEl",
"onUpdate:modelValue": t[9] || (t[9] = (s) => n.html5Color = s),
onChange: t[10] || (t[10] = (s) => i.updataValue(n.html5Color))
}, null, 544), [
[$, n.html5Color]
])
])
], 6)
], 4);
}
const He = /* @__PURE__ */ O(Pe, [["render", Fe], ["__scopeId", "data-v-f1561d7b"]]), Qe = {
name: "tooltip",
props: {
text: "",
align: {
type: String,
default: "left"
},
alwaysShow: {
type: Boolean,
default: !1
},
lineClamp: {
type: Number,
default: 1
},
width: {
type: Number,
default: null
},
delay: {
type: Number,
default: 300
},
placement: {
type: String,
default: "middle",
validator(e) {
return ["left", "right", "middle"].includes(e);
}
}
},
data() {
return {
domDatas: null,
isOverflow: !1,
isOnFocus: !1,
domText: "",
timer: null,
closeTimer: null,
clickWatch: null,
toolTipDom: null,
domIndex: null
};
},
computed: {
tipText() {
return this.text || this.text === 0 || this.text === !1 ? this.text : domText;
}
},
methods: {
mouseover() {
if (this.isOnFocus)
return;
const e = this.$el, t = e.getBoundingClientRect(), l = () => {
this.domText = e.textContent, this.isOnFocus = !0, this.toOpenToolTip();
}, o = () => {
let n = e, i = 100;
for (; n && n.style && n; )
n.style.zIndex && n.style.zIndex > i && (i = n.style.zIndex), n = n.parentNode;
return i;
};
this.domIndex || (this.domIndex = o()), this.alwaysShow ? l() : this.domDatas && this.domDatas.text === e.textContent && this.domDatas.width === t.width && this.domDatas.height === t.height ? this.isOverflow && l() : (this.domDatas = {
text: e.textContent,
width: t.width,
height: t.height
}, this.getCloneDom(e, t).height > t.height ? (this.isOverflow = !0, l()) : this.getCloneDom(e, t, "noWrap").width + 4 > t.width ? (this.isOverflow = !0, l()) : this.isOverflow = !1);
},
getCloneDom(e, t, l) {
const o = e.cloneNode(!0);
o.style.lineHeight = window.getComputedStyle(e).lineHeight, o.style.fontSize = window.getComputedStyle(e).fontSize, l ? (o.style.width = "fit-content", o.style.textWrap = "noWrap") : (o.style.width = t.width + "px", o.style.textWrap = "wrap"), o.style.display = "block", document.body.appendChild(o);
const n = o.getBoundingClientRect();
return document.body.removeChild(o), n;
},
mouseleave() {
this.isOnFocus && (this.isOnFocus = !1, window.removeEventListener("scroll", this.mouseleave), this.clickWatch && (this.clickWatch(), this.clickWatch = null), this.timer ? (clearTimeout(this.timer), this.timer = null) : this.toolTipDom && (this.toolTipDom.style.opacity = 0, this.closeTimer && clearTimeout(this.closeTimer), this.closeTimer = setTimeout(() => {
document.body.removeChild(this.toolTipDom), this.toolTipDom = null, this.closeTimer = null;
}, 300)));
},
toOpenToolTip() {
this.timer = setTimeout(() => {
this.toolTipDom = document.createElement("div"), this.toolTipDom.textContent = this.domText;
const t = this.$el.getBoundingClientRect();
let l = "";
this.width && (this.toolTipDom.style.maxWidth = this.width + "px"), this.toolTipDom.style.backgroundColor = "var(--tooltip-bg-color)", this.toolTipDom.style.borderRadius = "var(--tooltip-border-radius)", this.toolTipDom.style.fontSize = "var(--tooltip-font-size)", this.toolTipDom.style.color = "var(--tooltip-text-color)", this.toolTipDom.style.padding = "var(--tooltip-padding)", this.toolTipDom.style.transition = "opacity 0.3s ease-in-out", this.toolTipDom.style.zIndex = this.domIndex + 2, this.toolTipDom.style.opacity = 0, document.body.appendChild(this.toolTipDom), (() => {
this.toolTipDom.style.position = "fixed";
const u = this.toolTipDom.getBoundingClientRect();
t.top < window.innerHeight / 2 ? (this.toolTipDom.style.top = t.bottom + 5 + "px", l = "bottom") : (this.toolTipDom.style.bottom = window.innerHeight - t.top + 5 + "px", l = "top");
let r = {};
this.placement === "left" ? (r.left = t.left, l = l + "-left", r.left < 2 && (r.left = 2)) : this.placement === "right" ? (r.right = t.right, l = l + "-right", r.right < 2 && (r.right = 2)) : (r.left = t.left + t.width / 2 - u.width / 2, r.left < 2 ? (r.left = 2, l = l + "-left") : l = l + "-middle"), Object.keys(r).forEach((p) => {
this.toolTipDom.style[p] = r[p] + "px";
}), this.toolTipDom.style.opacity = 1;
})(), this.clickWatch && this.clickWatch(), this.clickWatch = Q(this.toolTipDom, this.mouseleave), window.addEventListener("scroll", this.mouseleave), this.timer = null;
const n = document.createElement("div");
n.style.width = "10px", n.style.height = "10px", n.style.backgroundColor = "var(--tooltip-bg-color)", n.style.transform = "rotate(45deg)", n.style.zIndex = this.domIndex + 1, this.toolTipDom.appendChild(n), n.style.position = "absolute";
const i = this.toolTipDom.getBoundingClientRect();
window.innerWidth - i.right < 30 && (l = l.replace("-left", "-right").replace("-middle", "-right")), l.includes("right") && (this.toolTipDom.style.left = "none", this.toolTipDom.style.right = document.documentElement.clientWidth - t.right + "px");
const s = t.width > i.width ? i.width : t.width;
switch (l) {
case "bottom-left":
n.style.left = parseInt(s / 4) + "px", n.style.top = "-5px";
break;
case "bottom-right":
n.style.right = parseInt(s / 4) - 5 + "px", n.style.top = "-5px";
break;
case "bottom-middle":
n.style.left = parseInt(i.width / 2) + "px", n.style.top = "-5px";
break;
case "top-left":
n.style.left = parseInt(s / 4) + "px", n.style.bottom = "-5px";
break;
case "top-right":
n.style.right = parseInt(s / 4) - 5 + "px", n.style.bottom = "-5px";
break;
case "top-middle":
n.style.left = parseInt(i.width / 2) + "px", n.style.bottom = "-5px";
break;
}
}, this.delay);
}
}
};
function je(e, t, l, o, n, i) {
return c(), f("div", {
class: "tooltip-container",
style: v([{ lineClamp: l.lineClamp, textAlign: l.align }]),
onMouseover: t[0] || (t[0] = (...s) => i.mouseover && i.mouseover(...s)),
onMouseleave: t[1] || (t[1] = (...s) => i.mouseleave && i.mouseleave(...s))
}, [
e.$slots.default ? x("", !0) : (c(), f(b, { key: 0 }, [
le(N(l.text || l.text === 0 || l.text === !1 ? l.text : "--"), 1)
], 64)),
D(e.$slots, "default", {}, void 0, !0)
], 36);
}
const Ue = /* @__PURE__ */ O(Qe, [["render", je], ["__scopeId", "data-v-6a5b1102"]]), Ze = {
name: "render",
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null
}
},
render() {
if (!this.render)
return null;
const e = {
row: this.row,
index: this.index,
column: this.column || []
}, t = {
resolveComponent: ie
};
return this.render(oe, e, t);
}
}, qe = {
name: "split",
props: {
minWidth: {
type: Number,
default: 100
},
dividerWidth: {
type: Number,
default: 10
},
location: {
type: Number,
//分隔面板的位置，只能是0-100之间的数字
default: 50,
validator: function(e) {
return e >= 0 && e <= 100;
}
}
},
data() {
return {
leftWidth: 0,
rightWidth: 0,
isDragging: !1
};
},
mounted() {
const e = this.$el.clientWidth;
this.leftWidth = e * (this.location / 100) - this.dividerWidth / 2, this.rightWidth = e * ((100 - this.location) / 100) - this.dividerWidth / 2, window.addEventListener("mousemove", this.handleMouseMove), window.addEventListener("mouseup", this.handleMouseUp), window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("mousemove", this.handleMouseMove), window.removeEventListener("mouseup", this.handleMouseUp), window.removeEventListener("resize", this.handleResize);
},
methods: {
handleMouseDown(e) {
this.isDragging = !0, document.body.style.cursor = "col-resize", e.preventDefault();
},
handleMouseUp() {
this.isDragging = !1, document.body.style.cursor = "default";
},
handleMouseMove(e) {
if (!this.isDragging)
return;
const l = this.$el.getBoundingClientRect(), o = e.clientX - l.left;
o < this.minWidth || l.width - o - this.dividerWidth < this.minWidth || (this.leftWidth = o, this.rightWidth = l.width - o - this.dividerWidth);
},
handleResize() {
const e = this.$el.clientWidth;
this.leftWidth = e / 2 - this.dividerWidth / 2, this.rightWidth = e / 2 - this.dividerWidth / 2;
}
}
}, Ge = { class: "split-pane" };
function Xe(e, t, l, o, n, i) {
return c(), f("div", Ge, [
m("div", {
class: "left-pane",
style: v({ width: n.leftWidth + "px" })
}, [
D(e.$slots, "left", {}, void 0, !0)
], 4),
m("div", {
class: "divider",
style: v({ width: l.dividerWidth + "px" }),
onMousedown: t[0] || (t[0] = (...s) => i.handleMouseDown && i.handleMouseDown(...s))
}, [
D(e.$slots, "divider", {}, void 0, !0)
], 36),
m("div", {
class: "right-pane",
style: v({ width: n.rightWidth + "px" })
}, [
D(e.$slots, "right", {}, void 0, !0)
], 4)
]);
}
const Ke = /* @__PURE__ */ O(qe, [["render", Xe], ["__scopeId", "data-v-35e2cf1d"]]), Je = [Ce, He, Ue, Ze, Ke], $e = (e) => {
Je.forEach((t) => {
e.component("wr-" + t.name, t);
});
};
export {
$e as default
};