vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
203 lines (202 loc) • 6.89 kB
JavaScript
import { defineComponent as ee, ref as r, computed as h, watch as C, nextTick as G, createElementBlock as c, openBlock as a, normalizeStyle as m, unref as L, createElementVNode as P, normalizeClass as g, Fragment as M, renderList as R, createBlock as z, resolveDynamicComponent as T, withCtx as k, createTextVNode as B, toDisplayString as E, createVNode as te, TransitionGroup as le, withDirectives as re, vShow as ae } from "vue";
import { useInject as oe, useResizeObserver as se, cancelRaf as O, rafTimeout as ie } from "../utils/index.js";
const fe = /* @__PURE__ */ ee({
__name: "TextScroll",
props: {
items: { default: () => [] },
single: { type: Boolean, default: !1 },
width: { default: "100%" },
height: { default: 50 },
itemStyle: { default: () => ({}) },
hrefHoverColor: { default: void 0 },
amount: { default: 4 },
gap: { default: 20 },
speed: { default: 48 },
vertical: { type: Boolean, default: !1 },
duration: { default: 1e3 },
interval: { default: 3e3 },
pauseOnMouseEnter: { type: Boolean, default: !1 }
},
emits: ["click"],
setup(q, { expose: J, emit: K }) {
const t = q, d = r(), W = r(0), b = r(), $ = r(), A = r(0), u = r("paused"), y = r(!0), p = r(0), n = r(), o = r(!0), s = r([]), { colorPalettes: D } = oe("TextScroll"), Q = K, x = h(() => s.value.length), I = h(() => ({
width: typeof t.width == "number" ? `${t.width}px` : t.width,
height: `${t.height}px`
})), V = h(() => t.single ? 1 : t.amount), F = h(() => parseFloat((W.value / V.value).toFixed(2))), U = h(() => A.value / t.speed);
C(
() => t.items,
() => {
t.single ? s.value = [t.items] : t.vertical && t.items.length === 1 ? s.value = [...t.items, ...t.items] : s.value = [...t.items];
},
{
immediate: !0,
deep: !0
}
), C(s, () => {
N();
}), C(
() => [t.vertical, t.duration, t.interval],
() => {
H();
},
{
deep: !0,
flush: "post"
}
), se([d, $, b], () => {
H();
});
function H() {
n.value && O(n.value), o.value || (o.value = !0), t.vertical || X(), f();
}
function X() {
W.value = d.value.offsetWidth, A.value = $.value.offsetWidth;
}
function Y() {
u.value = "paused", G(() => {
var l;
(l = d.value) == null || l.offsetTop, u.value = "running";
});
}
function Z() {
Y();
}
function _() {
n.value = ie(
() => {
o.value && (o.value = !1), p.value = (p.value + 1) % x.value;
},
o.value ? t.interval : t.interval + t.duration,
!0
);
}
function S(l) {
Q("click", l);
}
function f() {
t.vertical ? x.value >= 1 && _() : x.value >= V.value && (y.value = !1, u.value = "running");
}
function w() {
t.vertical ? (o.value = !0, n.value && O(n.value)) : u.value = "paused";
}
function N() {
t.vertical ? (n.value && O(n.value), p.value !== 0 ? (p.value = 0, o.value = !1) : o.value = !0, f()) : (u.value = "paused", y.value = !0, G(() => {
var l;
(l = d.value) == null || l.offsetTop, f();
}));
}
return J({
start: f,
stop: w,
reset: N
}), (l, i) => l.vertical ? (a(), c("div", {
key: 1,
ref_key: "verticalRef",
ref: b,
class: "m-scroll-vertical",
style: m([
I.value,
`
--text-scroll-shadow-color: #d3d3d3;
--text-scroll-bg-color: #fff;
--text-scroll-href-hover-color: ${l.hrefHoverColor || L(D)[5]};
--text-scroll-duration: ${l.duration}ms;
--text-scroll-timing-function: ease;
--text-scroll-scale: 0.5;
--text-scroll-item-padding: ${l.gap}px;
`
]),
onMouseenter: i[2] || (i[2] = (e) => l.pauseOnMouseEnter ? w() : () => !1),
onMouseleave: i[3] || (i[3] = (e) => l.pauseOnMouseEnter ? f() : () => !1)
}, [
te(le, { name: "slide" }, {
default: k(() => [
(a(!0), c(M, null, R(s.value, (e, v) => re((a(), c("div", {
class: "scroll-item-wrap",
key: v
}, [
(a(), z(T(e.href ? "a" : "div"), {
class: g(["scroll-item", { "href-item": e.href }]),
style: m(l.itemStyle),
title: e.title,
href: e.href,
target: e.target,
onClick: (j) => S(e)
}, {
default: k(() => [
B(E(e.title), 1)
]),
_: 2
}, 1032, ["class", "style", "title", "href", "target", "onClick"]))
])), [
[ae, p.value === v]
])), 128))
]),
_: 1
})
], 36)) : (a(), c("div", {
key: 0,
ref_key: "horizontalRef",
ref: d,
class: "m-scroll-horizontal",
style: m([
I.value,
`
--text-scroll-shadow-color: #d3d3d3;
--text-scroll-bg-color: #fff;
--text-scroll-href-hover-color: ${l.hrefHoverColor || L(D)[5]};
--text-scroll-item-gap: ${l.gap}px;
--text-scroll-play-state: ${u.value};
--text-scroll-duration: ${U.value}s;
--text-scroll-delay: 0s;
--text-scroll-iteration-count: infinite;
`
]),
onMouseenter: i[0] || (i[0] = (e) => l.pauseOnMouseEnter ? w() : () => !1),
onMouseleave: i[1] || (i[1] = (e) => l.pauseOnMouseEnter ? f() : () => !1)
}, [
P("div", {
ref_key: "groupRef",
ref: $,
class: g(["scroll-items-group", { "scroll-items-reset": y.value }]),
onAnimationiteration: Z
}, [
(a(!0), c(M, null, R(s.value, (e, v) => (a(), z(T(e.href ? "a" : "div"), {
class: g(["scroll-item", { "href-item": e.href }]),
style: m([l.itemStyle, `width: ${F.value}px;`]),
key: v,
title: e.title,
href: e.href,
target: e.target,
onClick: (j) => S(e)
}, {
default: k(() => [
B(E(e.title), 1)
]),
_: 2
}, 1032, ["class", "style", "title", "href", "target", "onClick"]))), 128))
], 34),
P("div", {
class: g(["scroll-items-group", { "scroll-items-reset": y.value }])
}, [
(a(!0), c(M, null, R(s.value, (e, v) => (a(), z(T(e.href ? "a" : "div"), {
class: g(["scroll-item", { "href-item": e.href }]),
style: m([l.itemStyle, `width: ${F.value}px;`]),
key: v,
title: e.title,
href: e.href,
target: e.target,
onClick: (j) => S(e)
}, {
default: k(() => [
B(E(e.title), 1)
]),
_: 2
}, 1032, ["class", "style", "title", "href", "target", "onClick"]))), 128))
], 2)
], 36));
}
});
export {
fe as default
};