vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
295 lines (294 loc) • 11.2 kB
JavaScript
import { defineComponent as be, ref as r, computed as m, watch as Z, createElementBlock as f, openBlock as c, normalizeStyle as g, normalizeClass as b, createElementVNode as x, createCommentVNode as I, Fragment as K, renderList as _, createVNode as ee, unref as te, mergeProps as ae, withCtx as le, withModifiers as O } from "vue";
import { useInject as xe, useEventListener as Se, useResizeObserver as Ae, cancelRaf as h, rafTimeout as ue } from "../utils/index.js";
import { useTransition as ze } from "@vueuse/core";
import ie from "../spin/index.js";
const Fe = ["onClick"], Le = ["href", "target"], pe = ["onLoad", "src", "alt"], Ee = ["href", "target"], Me = ["src", "alt"], Pe = ["onClick", "onMouseenter"], Te = /* @__PURE__ */ be({
__name: "Carousel",
props: {
images: { default: () => [] },
width: { default: "100%" },
height: { default: "100vh" },
autoplay: { type: Boolean, default: !1 },
pauseOnMouseEnter: { type: Boolean, default: !1 },
effect: { default: "slide" },
interval: { default: 3e3 },
showArrow: { type: Boolean, default: !0 },
arrowColor: { default: "#FFF" },
arrowSize: { default: 36 },
dots: { type: Boolean, default: !0 },
dotSize: { default: 10 },
dotColor: { default: "rgba(255, 255, 255, 0.3)" },
dotActiveColor: { default: void 0 },
dotStyle: { default: () => ({}) },
dotActiveStyle: { default: () => ({}) },
dotPosition: { default: "bottom" },
dotsTrigger: { default: "click" },
spinProps: { default: () => ({}) },
fadeDuration: { default: 500 },
fadeFunction: { default: "cubic-bezier(0.4, 0, 0.2, 1)" },
slideDuration: { default: 800 },
slideFunction: { default: () => [0.65, 0, 0.35, 1] }
},
emits: ["change", "click"],
setup(a, { expose: oe, emit: ne }) {
const t = a, s = r(0), o = r(), M = r(!1), v = r(!1), w = r(), P = r(), S = r(), l = r(1), A = r(), z = r(), k = r(Array(t.images.length).fill(!1)), { colorPalettes: re } = xe("Carousel"), H = ne, se = m(() => typeof t.width == "number" ? `${t.width}px` : t.width), ve = m(() => typeof t.height == "number" ? `${t.height}px` : t.height), n = m(() => t.images.length), F = m(() => ["left", "right"].includes(t.dotPosition)), d = m(() => F.value ? z.value : A.value), fe = m(() => t.dotActiveColor === void 0 ? re.value[5] : t.dotActiveColor), ce = m(() => t.effect === "slide" ? {
transform: (F.value ? "translateY" : "translateX") + `(${-s.value}px)`
} : {});
Z(
() => [
F.value,
t.effect,
t.images,
t.autoplay,
t.interval,
t.fadeDuration,
t.fadeFunction,
k.value[0]
],
() => {
V();
},
{
deep: !0,
flush: "post"
}
), Z(l, (e) => {
H("change", e);
}), Se(document, "visibilitychange", me), Ae(S, () => {
de(), V();
});
function V() {
o.value && h(o.value), w.value && cancelAnimationFrame(w.value), v.value = !1, t.effect === "slide" && (s.value = (l.value - 1) * d.value), R();
}
function W(e) {
k.value[e] = !0;
}
function de() {
A.value = S.value.offsetWidth, z.value = S.value.offsetHeight;
}
function B(e) {
n.value > 1 && ((e.key === "ArrowLeft" || e.key === "ArrowUp") && D(), (e.key === "ArrowRight" || e.key === "ArrowDown") && N());
}
function me() {
document.visibilityState === "hidden" ? (o.value && h(o.value), s.value = C.value + E.value, v.value = !1) : R();
}
function R() {
t.autoplay && n.value > 1 && k.value[0] && (M.value = !1, L());
}
function ge() {
o.value && h(o.value), M.value = !0;
}
function L() {
M.value || (o.value && h(o.value), o.value = ue(() => {
if (v.value = !0, t.effect === "slide") {
const e = s.value % (n.value * d.value) + d.value;
T(e), l.value = l.value % n.value + 1;
} else
$("left");
}, t.interval));
}
function D() {
if (!v.value)
if (v.value = !0, o.value && h(o.value), t.effect === "slide") {
const e = (l.value + n.value - 2) % n.value * d.value;
J(e), l.value = l.value - 1 > 0 ? l.value - 1 : n.value;
} else
$("right");
}
function N() {
if (!v.value)
if (v.value = !0, o.value && h(o.value), t.effect === "slide") {
const e = l.value * d.value;
T(e), l.value = l.value % n.value + 1;
} else
$("left");
}
const p = r(0), C = r(0), E = r(0), U = ze(p, {
duration: t.slideDuration,
// 过渡动画时长
transition: t.slideFunction
// 过渡动画函数
});
function $(e, u) {
e === "left" ? l.value = l.value % n.value + 1 : e === "right" ? l.value = l.value - 1 > 0 ? l.value - 1 : n.value : l.value = u, ue(() => {
v.value = !1, t.autoplay && L();
}, t.fadeDuration);
}
function j(e) {
P.value = e, p.value = p.value ? 0 : 1, C.value = s.value, E.value = e - C.value;
}
function X() {
p.value ? s.value = C.value + E.value * U.value : s.value = C.value + E.value * (1 - U.value);
}
function Y() {
s.value >= P.value ? (v.value = !1, t.autoplay && L()) : (X(), w.value = requestAnimationFrame(Y));
}
function T(e) {
s.value === n.value * d.value && (s.value = 0), j(e), w.value = requestAnimationFrame(Y);
}
function G() {
s.value <= P.value ? (v.value = !1, t.autoplay && L()) : (X(), w.value = requestAnimationFrame(G));
}
function J(e) {
s.value === 0 && (s.value = n.value * d.value), j(e), w.value = requestAnimationFrame(G);
}
function q(e) {
if (!v.value && l.value !== e) {
if (v.value = !0, o.value && h(o.value), e < l.value)
if (t.effect === "slide") {
const u = (e - 1) * d.value;
J(u), l.value = e;
} else
$("switch", e);
if (e > l.value)
if (t.effect === "slide") {
const u = (e - 1) * d.value;
T(u), l.value = e;
} else
$("switch", e);
}
}
function he(e) {
q(e);
}
function Q(e) {
H("click", e);
}
function we(e) {
e >= 1 && e <= n.value && q(e);
}
function ye() {
D();
}
function ke() {
N();
}
function Ce() {
return l.value;
}
return oe({
to: we,
prev: ye,
next: ke,
getCurrentIndex: Ce
}), (e, u) => (c(), f("div", {
ref_key: "carouselRef",
ref: S,
class: b(["carousel-wrap", { "carousel-vertical": F.value, "carousel-fade": a.effect === "fade" }]),
style: g(`
--carousel-width: ${se.value};
--carousel-height: ${ve.value};
--carousel-arrow-color: ${a.arrowColor};
--carousel-dot-size: ${a.dotSize}px;
--carousel-dot-color: ${a.dotColor};
--carousel-fade-duration: ${t.fadeDuration}ms;
--carousel-fade-function: ${t.fadeFunction};
`),
onMouseenter: u[2] || (u[2] = (i) => a.autoplay && a.pauseOnMouseEnter ? ge() : () => !1),
onMouseleave: u[3] || (u[3] = (i) => a.autoplay && a.pauseOnMouseEnter ? R() : () => !1)
}, [
x("div", {
class: "carousel-flex-wrap",
style: g(ce.value)
}, [
(c(!0), f(K, null, _(a.images, (i, y) => (c(), f("div", {
class: b(["image-wrap", { "image-fade-active": a.effect === "fade" && l.value === y + 1 }]),
onClick: ($e) => Q(i),
key: y
}, [
ee(te(ie), ae({
spinning: !k.value[y],
indicator: "dynamic-circle"
}, { ref_for: !0 }, a.spinProps), {
default: le(() => [
x("a", {
class: b(["image-link", { "link-cursor": i.link }]),
href: i.link,
target: i.target ? i.target : "_blank"
}, [
(c(), f("img", {
onLoad: ($e) => W(y),
src: i.src,
key: i.src,
alt: i.name,
class: "image-item",
style: g(`width: ${A.value}px; height: ${z.value}px;`)
}, null, 44, pe))
], 10, Le)
]),
_: 2
}, 1040, ["spinning"])
], 10, Fe))), 128)),
n.value && a.effect === "slide" ? (c(), f("div", {
key: 0,
class: "image-wrap",
onClick: u[1] || (u[1] = (i) => Q(a.images[0]))
}, [
ee(te(ie), ae({
spinning: !k.value[0],
indicator: "dynamic-circle"
}, a.spinProps), {
default: le(() => [
x("a", {
class: b(["image-link", { "link-cursor": a.images[0].link }]),
href: a.images[0].link,
target: a.images[0].target ? a.images[0].target : "_blank"
}, [
(c(), f("img", {
onLoad: u[0] || (u[0] = (i) => W(0)),
src: a.images[0].src,
key: a.images[0].src,
alt: a.images[0].name,
class: "image-item",
style: g(`width: ${A.value}px; height: ${z.value}px;`)
}, null, 44, Me))
], 10, Ee)
]),
_: 1
}, 16, ["spinning"])
])) : I("", !0)
], 4),
a.showArrow ? (c(), f(K, { key: 0 }, [
(c(), f("svg", {
tabindex: "0",
class: "arrow-left",
style: g(`width: ${a.arrowSize}px; height: ${a.arrowSize}px;`),
onClick: D,
onKeydown: O(B, ["prevent"]),
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 16 16"
}, [...u[4] || (u[4] = [
x("path", { d: "M10.26 3.2a.75.75 0 0 1 .04 1.06L6.773 8l3.527 3.74a.75.75 0 1 1-1.1 1.02l-4-4.25a.75.75 0 0 1 0-1.02l4-4.25a.75.75 0 0 1 1.06-.04z" }, null, -1)
])], 36)),
(c(), f("svg", {
tabindex: "0",
class: "arrow-right",
style: g(`width: ${a.arrowSize}px; height: ${a.arrowSize}px;`),
onClick: N,
onKeydown: O(B, ["prevent"]),
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 16 16"
}, [...u[5] || (u[5] = [
x("path", { d: "M5.74 3.2a.75.75 0 0 0-.04 1.06L9.227 8L5.7 11.74a.75.75 0 1 0 1.1 1.02l4-4.25a.75.75 0 0 0 0-1.02l-4-4.25a.75.75 0 0 0-1.06-.04z" }, null, -1)
])], 36))
], 64)) : I("", !0),
a.dots ? (c(), f("div", {
key: 1,
class: b(["carousel-switch", `switch-${a.dotPosition}`])
}, [
(c(!0), f(K, null, _(n.value, (i) => (c(), f("div", {
tabindex: "0",
class: "dot-item",
style: g([a.dotStyle, l.value === i ? { backgroundColor: fe.value, ...a.dotActiveStyle } : {}]),
key: i,
onClick: (y) => a.dotsTrigger === "click" ? q(i) : () => !1,
onMouseenter: (y) => a.dotsTrigger === "hover" ? he(i) : () => !1,
onKeydown: O(B, ["prevent"])
}, null, 44, Pe))), 128))
], 2)) : I("", !0)
], 38));
}
});
export {
Te as default
};