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