st-common-ui-vue3
Version:
小尾巴通用 Vue3 UI 组件库
129 lines (128 loc) • 6.06 kB
JavaScript
import { defineComponent as F, ref as n, onMounted as C, onBeforeMount as N, watch as O, provide as H, openBlock as p, createElementBlock as I, normalizeClass as M, normalizeStyle as w, createElementVNode as f, createVNode as V, unref as h, withCtx as S, renderSlot as L, Fragment as W, renderList as A, createBlock as E, toDisplayString as U } from "vue";
import B from "../StSwiper/StSwiper.vue.js";
/* empty css */
import $ from "../StSwiperSlide/StSwiperSlide.vue.js";
import { useWindowSize as m } from "../../node_modules/.pnpm/@vueuse_core@12.0.0_typescript@5.6.2/node_modules/@vueuse/core/index.js";
const x = { class: "st-timeline1__display" }, j = { class: "st-timeline1__timeline" }, q = { class: "st-timeline1__timeline-swipe__slide__content__label" }, Y = /* @__PURE__ */ F({
name: "StTimeline1",
__name: "StTimeline1",
props: {
initialIndex: { default: 0 },
enableMousewheelSwitch: { type: Boolean, default: !0 },
speed: { default: 1500 },
transitionFun: { default: "cubic-bezier(.68, -0.55, .26, 1.55)" },
transitionDelay: { default: 0 },
background: { default: "transparent" },
timelineData: {},
timelinePerView: { default: 1 },
timelinePerViewReactScreen: { default: 1 },
timelineOffset: { default: void 0 },
timelineColor: { default: "#9c9c9c9f" },
timelineColorActive: { default: "#efefef" },
timelineTextMaxLine: { default: 1 },
timelineSpeed: { default: 1200 },
timelineTransitionFun: { default: "cubic-bezier(.68, -0.55, .26, 1.55)" },
timelineTransitionDelay: { default: 300 },
enableTimelineNav: { type: Boolean, default: !0 },
needReactScreenWidth: { default: 600 }
},
setup(P) {
const a = P, _ = n("vertical"), s = n(), y = n(), r = n(), g = n();
C(() => {
y.value = s.value.swiper, g.value = r.value.swiper;
});
const d = n(a.timelineOffset), v = (e) => {
if (d.value === void 0) {
const t = (i.value ? m().width.value : m().height.value) / e;
d.value = t * (e / 2 - 0.5);
}
};
N(() => {
v(a.timelinePerView);
});
const u = n(a.initialIndex), i = n(!1), b = (e) => {
var t, c, o, D, R, T, k, z;
const l = e <= a.needReactScreenWidth;
l && !i.value ? (i.value = !0, (t = s.value.swiper) == null || t.changeDirection("horizontal"), (c = r.value.swiper) == null || c.changeDirection("horizontal"), v(a.timelinePerViewReactScreen), (o = s.value.swiper) == null || o.update(), (D = r.value.swiper) == null || D.update()) : !l && i.value && (i.value = !1, (R = s.value.swiper) == null || R.changeDirection("vertical"), (T = r.value.swiper) == null || T.changeDirection("vertical"), v(a.timelinePerView), (k = s.value.swiper) == null || k.update(), (z = r.value.swiper) == null || z.update());
};
return C(() => {
b(m().width.value);
}), O(() => m().width.value, (e) => {
b(e);
}), H("isReact", i), (e, l) => (p(), I("div", {
class: M(["st-timeline1", [i.value ? "st-timeline1--small-screen" : ""]]),
style: w({ background: e.background })
}, [
f("div", x, [
V(h(B), {
ref_key: "displaySwiperRef",
ref: s,
"active-slide-idx": u.value,
"onUpdate:activeSlideIdx": l[0] || (l[0] = (t) => u.value = t),
"initial-slide": e.initialIndex,
direction: _.value,
mousewheel: e.enableMousewheelSwitch,
"control-swiper": g.value,
"transition-fun": e.transitionFun,
"transition-speed": e.speed,
"transition-delay": e.transitionDelay
}, {
default: S(() => [
L(e.$slots, "default", {}, void 0, !0)
]),
_: 3
}, 8, ["active-slide-idx", "initial-slide", "direction", "mousewheel", "control-swiper", "transition-fun", "transition-speed", "transition-delay"])
]),
f("div", j, [
V(h(B), {
ref_key: "timelineSwiperRef",
ref: r,
class: "st-timeline1__timeline-swiper",
width: i.value ? "100vw" : "100%",
height: i.value ? "100%" : "100vh",
"active-slide-idx": u.value,
"onUpdate:activeSlideIdx": l[1] || (l[1] = (t) => u.value = t),
"initial-slide": e.initialIndex,
direction: _.value,
"slides-per-view": e.timelinePerView,
"slides-offset-before": d.value,
"slides-offset-after": d.value,
mousewheel: e.enableMousewheelSwitch,
navigation: e.enableTimelineNav,
"nav-direction": "vertical",
"nav-align": i.value ? "end" : "start",
"control-swiper": y.value,
"swiper-overflow": "initial",
"transition-fun": e.timelineTransitionFun,
"transition-speed": e.timelineSpeed,
"transition-delay": e.timelineTransitionDelay
}, {
default: S(({ activeSlideIdx: t }) => [
(p(!0), I(W, null, A(e.timelineData, (c, o) => (p(), E(h($), {
key: o,
class: M(["st-timeline1__timeline-swipe__slide", [t === o ? "st-timeline1__timeline-swipe__slide--active" : ""]]),
style: w({
"--timeline-color": e.timelineColor,
"--timeline-color-active": e.timelineColorActive
})
}, {
default: S(() => [
f("div", {
class: "st-timeline1__timeline-swipe__slide__content",
style: w({ "--timeline-text-max-line": e.timelineTextMaxLine })
}, [
f("div", q, U(c), 1)
], 4)
]),
_: 2
}, 1032, ["class", "style"]))), 128))
]),
_: 1
}, 8, ["width", "height", "active-slide-idx", "initial-slide", "direction", "slides-per-view", "slides-offset-before", "slides-offset-after", "mousewheel", "navigation", "nav-align", "control-swiper", "transition-fun", "transition-speed", "transition-delay"])
])
], 6));
}
});
export {
Y as default
};