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