@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
81 lines (80 loc) • 2.25 kB
JavaScript
import { defineComponent as b, ref as n, onMounted as I, onUnmounted as L } from "vue";
import y from "../../navigation/link/NeonLink.vue.es.js";
import N from "../../user-input/button/NeonButton.vue.es.js";
const x = b({
name: "NeonImageCarousel",
components: {
NeonButton: N,
NeonLink: y
},
props: {
/**
* The images to be displayed in the carousel.
*/
images: { type: Array, required: !0 },
/**
* Provide an alternative image count label. This can be useful for translations. The default is e.g.
* <em>2 images</em>.
*/
imageCountLabel: { type: String, default: void 0 },
/**
* Provide an alternative label for the Previous button.
*/
previousLabel: { type: String, default: "Previous" },
/**
* Provide an alternative label for the Next button.
*/
nextLabel: { type: String, default: "Next" }
},
emits: [
/**
* The index of the currently visible image.
*
* @type {number}
*/
"current-image"
],
setup(s, { emit: l }) {
const r = n(!1), o = n(0), t = n(null), u = n([]), i = n([]), c = (e) => {
e !== o.value && (o.value = e, l("current-image", e));
}, a = (e) => {
t.value && s.images.length > 0 && (c(e), t.value.scrollTo(t.value.clientWidth * e, 0));
}, m = () => {
o.value < s.images.length - 1 && a(o.value + 1);
}, f = () => {
o.value !== 0 && a(o.value - 1);
};
return I(() => {
const e = {
root: t.value,
rootMargin: "0px",
threshold: 0.6
};
i.value = u.value.map((g, p) => {
const v = new IntersectionObserver((d) => {
d.forEach((h) => {
r.value && h.isIntersecting && c(p);
});
}, e);
return v.observe(g), v;
}), setTimeout(() => {
t.value && t.value.scrollLeft !== 0 && (t.value.scrollLeft = 0), r.value = !0;
}, 50);
}), L(() => {
i.value.forEach((e) => e.disconnect());
}), {
emit: l,
currentImage: o,
carouselItem: u,
carouselItems: t,
initialised: r,
next: m,
previous: f,
scrollTo: a
};
}
});
export {
x as default
};
//# sourceMappingURL=NeonImageCarousel.es.js.map