@fish-render/carousel
Version:
Fish Render carousel component for Vue 3
238 lines (237 loc) • 8.88 kB
JavaScript
import { defineComponent as V, h as Y, useSlots as j, ref as C, computed as v, Fragment as I, provide as D, onMounted as F, onBeforeUnmount as H, watch as R, openBlock as h, createElementBlock as g, normalizeClass as _, createElementVNode as y, normalizeStyle as T, renderList as k, withDirectives as X, createBlock as q, resolveDynamicComponent as J, vShow as K, createVNode as B, unref as N, createCommentVNode as Q, renderSlot as Z } from "vue";
function ee(l, e) {
return V({
name: e,
setup() {
return () => Y("span", {
innerHTML: l,
class: "fish-icon-component",
style: {
display: "inline-flex"
}
});
}
});
}
function M(l, e) {
return ee(l, e);
}
const te = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="1em" height="1em" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M670.954667 86.826667L269.44 488.362667a32 32 0 0 0-2.090667 42.965333l2.090667 2.282667L670.933333 935.168a8.533333 8.533333 0 0 0 6.037334 2.496h66.368a8.533333 8.533333 0 0 0 6.037333-14.570667L337.28 511.018667 749.397333 98.901333a8.533333 8.533333 0 0 0-6.037333-14.570666h-66.346667a8.533333 8.533333 0 0 0-6.058666 2.496z" /></svg>', ne = M(te, "left"), le = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="1em" height="1em" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M353.045333 86.826667L754.56 488.362667a32 32 0 0 1 2.090667 42.965333l-2.090667 2.282667L353.066667 935.168a8.533333 8.533333 0 0 1-6.037334 2.496h-66.368a8.533333 8.533333 0 0 1-6.037333-14.570667L686.72 511.018667 274.602667 98.901333a8.533333 8.533333 0 0 1 6.037333-14.570666h66.346667a8.533333 8.533333 0 0 1 6.058666 2.496z" /></svg>', oe = M(le, "right"), ae = (l, e) => {
const r = l.__vccOpts || l;
for (const [n, m] of e)
r[n] = m;
return r;
}, se = { class: "fish-carousel__content" }, ie = ["onClick"], ue = {
name: "Carousel"
}, re = /* @__PURE__ */ V({
...ue,
props: {
interval: {},
autoplay: { type: Boolean, default: !0 },
indicatorPosition: { default: "inside" },
loop: { type: Boolean, default: !0 },
height: {}
},
setup(l) {
const e = l, r = j(), n = C(0), m = C(null), $ = v(() => e.interval ?? 3e3), a = C(!1), f = typeof window < "u", E = v(() => {
if (!e.height)
return {};
if (typeof e.height == "string" || typeof e.height == "number")
return { height: typeof e.height == "number" ? `${e.height}px` : e.height };
if (typeof e.height == "object") {
const t = {};
if (e.height.xs) {
const s = typeof e.height.xs == "number" ? `${e.height.xs}px` : e.height.xs;
t["--carousel-height-xs"] = s;
}
if (e.height.sm) {
const s = typeof e.height.sm == "number" ? `${e.height.sm}px` : e.height.sm;
t["--carousel-height-sm"] = s;
}
if (e.height.md) {
const s = typeof e.height.md == "number" ? `${e.height.md}px` : e.height.md;
t["--carousel-height-md"] = s;
}
if (e.height.lg) {
const s = typeof e.height.lg == "number" ? `${e.height.lg}px` : e.height.lg;
t["--carousel-height-lg"] = s;
}
if (e.height.xl) {
const s = typeof e.height.xl == "number" ? `${e.height.xl}px` : e.height.xl;
t["--carousel-height-xl"] = s;
}
return t;
}
return {};
}), G = v(() => e.height ? typeof e.height == "string" || typeof e.height == "number" ? { height: typeof e.height == "number" ? `${e.height}px` : e.height } : {} : {}), b = v(() => {
const t = r.default ? r.default() : [];
return t.length === 1 && t[0].type === I && Array.isArray(t[0].children) ? t[0].children ?? [] : t;
}), o = v(() => b.value.length);
function A(t) {
if (o.value <= 1)
return n.value === t;
if (e.loop) {
const s = x(), d = w();
return t === n.value || t === s || t === d;
}
return n.value === 0 ? t === 0 || t === 1 : n.value === o.value - 1 ? t === o.value - 2 || t === o.value - 1 : t === n.value - 1 || t === n.value || t === n.value + 1;
}
function x() {
return o.value <= 1 ? 0 : (n.value - 1 + o.value) % o.value;
}
function w() {
return o.value <= 1 ? 0 : (n.value + 1) % o.value;
}
function S() {
return Math.max(n.value - 1, 0);
}
function P() {
return Math.min(n.value + 1, o.value - 1);
}
function W() {
return o.value <= 1 ? 0 : e.loop ? x() : S();
}
function z() {
return o.value <= 1 ? 0 : e.loop ? w() : P();
}
D("carouselItemWidth", v(() => 100));
const u = v(() => e.autoplay && o.value > 1);
function L() {
if (!a.value) {
if (p(), o.value <= 1) {
u.value && c();
return;
}
a.value = !0, e.loop ? n.value = w() : n.value = P(), f ? setTimeout(() => {
a.value = !1;
}, 500) : a.value = !1, u.value && c();
}
}
function O() {
if (!a.value) {
if (p(), o.value <= 1) {
u.value && c();
return;
}
a.value = !0, e.loop ? n.value = x() : n.value = S(), f ? setTimeout(() => {
a.value = !1;
}, 500) : a.value = !1, u.value && c();
}
}
function U(t) {
if (!a.value) {
if (p(), o.value <= 1) {
n.value = 0, u.value && c();
return;
}
a.value = !0, e.loop ? n.value = t : n.value = Math.max(0, Math.min(t, o.value - 1)), f ? setTimeout(() => {
a.value = !1;
}, 500) : a.value = !1, u.value && c();
}
}
function c() {
p(), u.value && f && (m.value = setInterval(() => {
L();
}, $.value));
}
function p() {
m.value && f && (clearInterval(m.value), m.value = null);
}
return F(() => {
u.value && f && c();
}), H(() => {
p();
}), R([$, u], () => {
u.value && f ? c() : p();
}), D("carouselIndex", n), (t, s) => (h(), g("div", {
class: _(["fish-carousel", { "fish-carousel--outside": e.indicatorPosition === "outside" }])
}, [
y("div", se, [
y("div", {
class: "fish-carousel__container",
style: T(E.value)
}, [
(h(!0), g(I, null, k(b.value, (d, i) => X((h(), g("div", {
key: i,
class: _(["fish-carousel-item-wrapper", {
"fish-carousel-item--active": n.value === i,
"fish-carousel-item--prev": W() === i,
"fish-carousel-item--next": z() === i,
"fish-carousel-item--first": i === 0,
"fish-carousel-item--last": i === o.value - 1
}]),
style: T(G.value)
}, [
(h(), q(J(d)))
], 6)), [
[K, A(i)]
])), 128))
], 4)
]),
y("div", {
class: "fish-carousel__nav-button fish-carousel__nav-button--prev",
onClick: O
}, [
B(N(ne), { class: "fish-carousel__nav-icon" })
]),
y("div", {
class: "fish-carousel__nav-button fish-carousel__nav-button--next",
onClick: L
}, [
B(N(oe), { class: "fish-carousel__nav-icon" })
]),
e.indicatorPosition !== "none" ? (h(), g("div", {
key: 0,
class: _([
"fish-carousel__indicators",
`fish-carousel__indicators--${e.indicatorPosition}`
])
}, [
(h(!0), g(I, null, k(o.value, (d, i) => (h(), g("div", {
key: i,
class: _(["fish-carousel__indicator", { "fish-carousel__indicator--active": n.value === i }]),
onClick: (me) => U(i)
}, null, 10, ie))), 128))
], 2)) : Q("", !0)
], 2));
}
}), ce = { class: "fish-carousel-item" }, he = {
name: "CarouselItem"
}, fe = /* @__PURE__ */ V({
...he,
setup(l) {
return (e, r) => (h(), g("div", ce, [
Z(e.$slots, "default", {}, void 0, !0)
]));
}
});
const ve = /* @__PURE__ */ ae(fe, [["__scopeId", "data-v-681f15a0"]]);
function de(l) {
return String(l || "");
}
function _e(l) {
return l != null;
}
function ye(l) {
return l > 0 ? 100 / l : 100;
}
function xe(l, e, r) {
return {
transform: `translateX(-${l * e}%)`,
width: `${r * 100}%`
};
}
const ge = (l) => {
l.component("Carousel", re), l.component("CarouselItem", ve);
}, we = {
install: ge
};
export {
re as Carousel,
ve as CarouselItem,
ye as calculateItemWidth,
we as default,
xe as formatCarouselStyle,
de as formatValue,
_e as validateProps
};