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