mine-h5-ui
Version:
一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍
212 lines (211 loc) • 8.42 kB
JavaScript
import { computed as K, ref as W, useTemplateRef as p, onMounted as tt } from "vue";
import { useMoveHandle as et } from "../MeComposable/useMoveHandle/index.js";
/*!
* mine-h5-ui v2.15.0
* Copyright (c) 2025 biaov
* @license MIT
*/
const s = (e, n) => ({ x: e, y: n }), nt = (e, n, t, i, M) => {
const v = 1 - M, P = v ** 2, h = v ** 3, w = M ** 3, R = M ** 2, g = 3 * M * P, X = 3 * R * v;
return s(Math.round(h * e.x + g * n.x + X * t.x + w * i.x), Math.round(h * e.y + g * n.y + X * t.y + w * i.y));
}, Z = (e, { width: n, height: t }) => ({ tl: s(n * 2, 0), tr: s(-n, 0), bl: s(n * 2, t), br: s(-n, t) })[e], Q = ({ point: e, width: n, height: t }) => {
let i = {}, M = {}, v = {}, P = {}, h = {}, w = {};
const R = (a, c, q, _) => {
const k = Array.from({ length: _ }, (H, j) => {
const [U, C] = q[j];
return `color-stop(${U}, ${C})`;
});
return { "background-image": `-webkit-gradient(linear, ${a.x}% ${a.y}%, ${c.x}% ${c.y}%, ${k.join(",")} )` };
}, g = (a) => a / Math.PI * 180, X = (a, c = 0) => ({ tl: s(c, c), tr: s(n - c, c), bl: s(c, t - c), br: s(n - c, t - c) })[a], u = (a, c) => ` translate(${a}px, ${c}px) `;
let I = 0, y = 0, E, T, D, l, r, x, f = s(0, 0), S = s(0, 0), o = s(0, 0);
const m = Math.round(Math.sqrt(n ** 2 + t ** 2)), d = X(e.corner), b = e.corner[0] === "t", $ = e.corner[1] === "l", B = Math.PI, O = B / 2, z = (a) => ` rotate(${a}deg) `, F = (a, c) => ({
transform: a,
transformOrigin: c
}), Y = () => {
const a = s(d.x ? d.x - e.x : e.x, d.y ? d.y - e.y : e.y), c = Math.atan2(a.y, a.x);
y = O - c, I = g(y);
const q = s($ ? n - a.x / 2 : e.x + a.x / 2, a.y / 2), _ = y - Math.atan2(q.y, q.x), k = Math.max(0, Math.sin(_) * Math.sqrt(q.x ** 2 + q.y ** 2));
if (o = s(k * Math.sin(y), k * Math.cos(y)), y > O) {
if (o.x += Math.abs(o.y * Math.tan(c)), o.y = 0, Math.round(o.x * Math.tan(B - y)) < t)
return e.y = Math.sqrt(t ** 2 + 2 * q.x * a.x), b && (e.y = t - e.y), Y();
const J = B - y, N = m - t / Math.sin(J);
f = s(Math.round(N * Math.cos(J)), Math.round(N * Math.sin(J))), $ && (f.x = -f.x), b && (f.y = -f.y);
}
E = Math.round(o.y / Math.tan(y) + o.x);
const H = n - E, j = H * Math.cos(y * 2), U = H * Math.sin(y * 2);
S = s(Math.round($ ? H - j : E + j), Math.round(b ? U : t - U)), r = H * Math.sin(y);
const C = Z(e.corner, { width: n, height: t }), L = Math.sqrt((C.x - e.x) ** 2 + (C.y - e.y) ** 2);
return x = L < n ? L / n : 1, l = r > 100 ? (r - 100) / r : 0, T = s(r * Math.sin(O - y) / t * 100, r * Math.cos(O - y) / n * 100), b && (T.y = 100 - T.y), $ && (T.x = 100 - T.x), D = s(r * Math.sin(y) / n * 100, r * Math.cos(y) / t * 100), !$ && (D.x = 100 - D.x), !b && (D.y = 100 - D.y), o.x = Math.round(o.x), o.y = Math.round(o.y), !0;
}, A = (a, c) => ({
width: `${a}px`,
height: `${c}px`
}), V = (a, c, [q, _], k) => {
const H = (n - m) * q / 100, j = (t - m) * _ / 100, U = k !== 90 && k !== -90 ? $ ? -1 : 1 : 0, C = `${q}% ${_}%`;
v = {
...F(z(k) + u(a.x + U, a.y), C),
...A(n, t),
inset: c
}, i = {
...F(u(-a.x + H - U, -a.y + j) + z(-k), C),
...A(m, m)
}, M = {
...F(u(-a.x + f.x + H, -a.y + f.y + j) + z(-k), C),
...A(m, m)
}, h = {
...F(z(k) + u(a.x + S.x - f.x, a.y + S.y - f.y), C),
...A(n, t),
inset: c
}, w = R(
s($ ? 100 : 0, b ? 100 : 0),
s(T.x, T.y),
[
[l, "transparent"],
[(1 - l) * 0.8 + l, `rgba(0,0,0,${0.2 * x})`],
[1, `rgba(255,255,255,${0.2 * x})`]
],
3
), P = R(
s($ ? 0 : 100, b ? 0 : 100),
s(D.x, D.y),
[
[0.8, "transparent"],
[1, `rgba(0,0,0,${0.3 * x})`],
[1, "transparent"]
],
3
);
};
let G = null;
switch (e.corner) {
// 上左
case "tl":
e.x = Math.max(e.x, 1), Y(), V(o, "0 0 auto auto", [100, 0], I), G = F(u(-t, -n) + z(90 - I * 2), "100% 100%");
break;
// 上右
case "tr":
e.x = Math.min(e.x, n - 1), Y(), V(s(-o.x, o.y), "0 0 auto 0", [0, 0], -I), G = F(u(0, -n) + z(-90 + I * 2), "0% 100%");
break;
// 下左
case "bl":
e.x = Math.max(e.x, 1), Y(), V(s(o.x, -o.y), "auto 0 0 auto", [100, 100], -I), G = F(u(-t, 0) + z(-90 + I * 2), "100% 0%");
break;
// 下右
case "br":
e.x = Math.min(e.x, n - 1), Y(), V(s(-o.x, -o.y), "auto auto 0 0", [0, 100], I), G = F(z(90 - I * 2), "0% 0%");
break;
}
return w = {
...w || {},
...G,
width: `${t}px`,
height: `${n}px`
}, { wrapStyle: i, fwrapStyle: M, itemStyle: v, shadowStyle: P, turnItemStyle: h, turnShadowStyle: w };
}, at = () => {
const e = {};
return { animateFrame: (t) => {
if (!t) return;
clearInterval(e.effect), !t.easing && (t.easing = (h, w, R, g) => R * Math.sqrt(1 - (h / g - 1) ** 2) + w);
const i = t.to - t.from, M = t.fps || 30;
let v = -M;
const P = () => {
v = Math.min(t.duration, v + M);
const h = t.easing(v, t.from, i, t.duration);
t.frame(h), v === t.duration && (clearInterval(e.effect), t.complete && t.complete());
};
P(), e.effect = setInterval(P, M);
} };
}, lt = (e, n) => {
const t = W({}), i = W({}), M = W({}), v = W({}), P = W({}), h = W({}), w = (l, r) => l === n.value ? r : "", R = p("turnPage"), g = K(() => {
var A, V;
const l = (V = (A = R.value) == null ? void 0 : A.getBoundingClientRect) == null ? void 0 : V.call(A);
if (!l) return;
const { x: r, y: x, width: f, height: S } = l, o = f / 2, m = S / 2, d = r + o, b = x + m, $ = r + f, B = x + S;
return {
hot: [{
corner: "tl",
start: [r, x],
end: [d, b]
}, {
corner: "tr",
start: [d, x],
end: [$, b]
}, {
corner: "bl",
start: [r, b],
end: [d, B]
}, {
corner: "br",
start: [d, b],
end: [$, B]
}],
size: {
width: f,
height: S
},
point: {
x: r,
y: x
}
};
}), X = () => {
t.value = {}, M.value = {}, v.value = {}, P.value = {}, h.value = {};
};
let u;
const I = ({ x: l, y: r }) => {
if (!g.value) throw new Error("turnPageRect is required");
const { point: x } = g.value;
return l -= x.x, r -= x.y, { x: l, y: r };
}, y = (l) => !(l.includes("l") && !n.value || !l.includes("l") && n.value >= e.list.length - 1), E = W(!1), T = {
start({ x: l, y: r }, x = !1) {
var d;
if (E.value || !g.value) return;
const { size: f, hot: S } = g.value;
if (x || (u = (d = S.find((b) => {
const [$, B] = b.start, [O, z] = b.end;
return l >= $ && l <= O && r >= B && r <= z;
})) == null ? void 0 : d.corner), !u || !y(u)) return;
const o = I({ x: l, y: r }), m = Q({
...f,
point: { ...o, corner: u }
});
t.value = m.wrapStyle, i.value = m.fwrapStyle, M.value = m.itemStyle, v.value = m.shadowStyle, P.value = m.turnItemStyle, h.value = m.turnShadowStyle;
},
move(l) {
this.start(l, !0);
},
end(l) {
if (!u || !g.value || E.value || !y(u)) return;
E.value = !0;
const { size: r } = g.value, x = Z(u, r), { animateFrame: f } = at(), S = { ...I(l), corner: u };
f({
from: 0,
to: 1,
frame: (o) => {
const m = nt(S, S, x, x, o);
S.x = m.x, S.y = m.y;
const d = Q({ point: S, ...r });
t.value = d.wrapStyle, i.value = d.fwrapStyle, M.value = d.itemStyle, v.value = d.shadowStyle, P.value = d.turnItemStyle, h.value = d.turnShadowStyle;
},
complete: () => {
n.value += u.includes("l") ? -1 : 1, X(), E.value = !1, u = "";
},
duration: Math.abs(x.x)
});
}
};
return tt(() => {
et(R.value, T);
}), { getItemStyle: K(() => (l) => u ? { zIndex: +(l === n.value + (u.includes("l") ? -1 : 1)) } : {}), wrapStyle: t, fwrapStyle: i, itemStyle: M, shadowStyle: v, turnItemStyle: P, turnShadowStyle: h, current: n, showValue: w };
}, ot = (e) => {
const n = (i) => `${+i}` == `${i}` ? `${i}px` : i;
return { getStyle: K(() => ({
width: n(e.width),
height: n(e.height),
"--max-z-index": e.list.length + 1
})) };
};
export {
Q as useComputeStyle,
ot as useStyle,
lt as useTurnPage
};