vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
211 lines (210 loc) • 7.86 kB
JavaScript
import { defineComponent as D, ref as u, computed as v, createElementBlock as d, openBlock as t, Fragment as f, createBlock as a, createCommentVNode as k, unref as o, mergeProps as b, withCtx as s, renderList as $, createElementVNode as i, resolveDynamicComponent as C, normalizeClass as z } from "vue";
import { useInject as H } from "../utils/index.js";
import { Swiper as E, SwiperSlide as B } from "swiper/vue";
import { Autoplay as M, Navigation as O, Pagination as I, Mousewheel as L, EffectCreative as W, EffectCards as q, EffectCoverflow as G, EffectFlip as J, EffectCube as K, EffectFade as Q } from "swiper/modules";
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
const R = ["src", "alt"], T = ["src", "alt"], U = ["src", "alt"], ne = /* @__PURE__ */ D({
__name: "Swiper",
props: {
images: { default: () => [] },
width: { default: "100%" },
height: { default: "100%" },
mode: { default: "banner" },
navigation: { type: Boolean, default: !1 },
effect: { default: "slide" },
delay: { default: 3e3 },
speed: { default: 300 },
loop: { type: Boolean, default: !0 },
pauseOnMouseEnter: { type: Boolean, default: !1 },
swipe: { type: Boolean, default: !0 },
preloaderColor: { default: "theme" }
},
emits: ["swiper", "change"],
setup(N, { emit: F }) {
const r = N, P = u({
delay: r.delay,
disableOnInteraction: !1,
// 用户操作 swiper 之后，是否禁止 autoplay。默认为 true：停止。
pauseOnMouseEnter: r.pauseOnMouseEnter
// 鼠标置于 swiper 时暂停自动切换，鼠标离开时恢复自动切换，默认 false
}), V = u([M]), _ = u({
delay: 0,
disableOnInteraction: !1
}), j = u([O, I, L]), { colorPalettes: c } = H("Swiper"), S = F, m = v(() => typeof r.width == "number" ? `${r.width}px` : r.width), w = v(() => typeof r.height == "number" ? `${r.height}px` : r.height), A = v(() => {
const e = [O, I, M], n = {
fade: Q,
cube: K,
flip: J,
coverflow: G,
cards: q,
creative: W
};
return r.effect !== "slide" && e.push(n[r.effect]), e;
});
function y(e) {
S("swiper", e), r.mode === "carousel" && r.pauseOnMouseEnter && (e.el.onmouseenter = () => {
e.autoplay.stop();
}, e.el.onmouseleave = () => {
e.autoplay.start();
});
}
function h(e) {
S("change", e);
}
function g(e) {
if (e.name)
return e.name;
{
const n = e.src.split("?")[0].split("/");
return n[n.length - 1];
}
}
return (e, n) => (t(), d(f, null, [
e.mode === "banner" ? (t(), a(o(E), b({
key: 0,
class: ["swiper-banner", { "swiper-no-swiping": !e.swipe }],
style: `
--swiper-width: ${m.value};
--swiper-height: ${w.value};
--swiper-primary-color: ${o(c)[5]};
--swiper-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
`,
modules: A.value,
navigation: e.navigation,
"slides-per-view": 1,
autoplay: P.value,
effect: e.effect,
speed: e.speed,
loop: e.loop,
lazy: "",
onSwiper: y,
onSlideChange: h
}, e.$attrs), {
default: s(() => [
(t(!0), d(f, null, $(e.images, (l, p) => (t(), a(o(B), { key: p }, {
default: s(() => [
(t(), a(C(l.link ? "a" : "div"), {
class: "swiper-link",
href: l.link,
target: l.target ? l.target : "_blank"
}, {
default: s(() => [
i("img", {
class: "swiper-image",
src: l.src,
alt: g(l),
loading: "lazy"
}, null, 8, R)
]),
_: 2
}, 1032, ["href", "target"])),
i("div", {
class: z(`swiper-lazy-preloader swiper-lazy-preloader-${e.preloaderColor}`)
}, null, 2)
]),
_: 2
}, 1024))), 128))
]),
_: 1
}, 16, ["class", "style", "modules", "navigation", "autoplay", "effect", "speed", "loop"])) : k("", !0),
e.mode === "carousel" ? (t(), a(o(E), b({
key: 1,
class: "swiper-carousel swiper-no-swiping",
style: `
--swiper-width: ${m.value};
--swiper-height: ${w.value};
--swiper-primary-color: ${o(c)[5]};
--swiper-timing-function: linear;
`,
modules: V.value,
autoplay: _.value,
speed: e.speed,
loop: e.loop,
lazy: "",
onSwiper: y,
onSlideChange: h
}, e.$attrs), {
default: s(() => [
(t(!0), d(f, null, $(e.images, (l, p) => (t(), a(o(B), { key: p }, {
default: s(() => [
(t(), a(C(l.link ? "a" : "div"), {
class: "swiper-link",
href: l.link,
target: l.target ? l.target : "_blank"
}, {
default: s(() => [
i("img", {
class: "swiper-image",
src: l.src,
alt: g(l),
loading: "lazy"
}, null, 8, T)
]),
_: 2
}, 1032, ["href", "target"])),
i("div", {
class: z(`swiper-lazy-preloader swiper-lazy-preloader-${e.preloaderColor}`)
}, null, 2)
]),
_: 2
}, 1024))), 128))
]),
_: 1
}, 16, ["style", "modules", "autoplay", "speed", "loop"])) : k("", !0),
e.mode === "broadcast" ? (t(), a(o(E), b({
key: 2,
class: "swiper-broadcast",
style: `
--swiper-width: ${m.value};
--swiper-height: ${w.value};
--swiper-primary-color: ${o(c)[5]};
--swiper-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
`,
modules: j.value,
navigation: e.navigation,
speed: e.speed,
loop: e.loop,
lazy: "",
onSwiper: y,
onSlideChange: h
}, e.$attrs), {
default: s(() => [
(t(!0), d(f, null, $(e.images, (l, p) => (t(), a(o(B), { key: p }, {
default: s(() => [
(t(), a(C(l.link ? "a" : "div"), {
class: "swiper-link",
href: l.link,
target: l.target ? l.target : "_blank"
}, {
default: s(() => [
i("img", {
class: "swiper-image",
src: l.src,
alt: g(l),
loading: "lazy"
}, null, 8, U)
]),
_: 2
}, 1032, ["href", "target"])),
i("div", {
class: z(`swiper-lazy-preloader swiper-lazy-preloader-${e.preloaderColor}`)
}, null, 2)
]),
_: 2
}, 1024))), 128))
]),
_: 1
}, 16, ["style", "modules", "navigation", "speed", "loop"])) : k("", !0)
], 64));
}
});
export {
ne as default
};