@aotearoan/neon/dist/components/presentation/image-carousel/NeonImageCarousel.cjs.js

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

"use strict";const o=require("vue"),b=require("../../navigation/link/NeonLink.vue.cjs.js"),I=require("../../user-input/button/NeonButton.vue.cjs.js"),L=o.defineComponent({name:"NeonImageCarousel",components:{NeonButton:I,NeonLink:b},props:{images:{type:Array,required:!0},imageCountLabel:{type:String,default:void 0},previousLabel:{type:String,default:"Previous"},nextLabel:{type:String,default:"Next"}},emits:["current-image"],setup(u,{emit:a}){const r=o.ref(!1),n=o.ref(0),t=o.ref(null),l=o.ref([]),i=o.ref([]),c=e=>{e!==n.value&&(n.value=e,a("current-image",e))},s=e=>{t.value&&u.images.length>0&&(c(e),t.value.scrollTo(t.value.clientWidth*e,0))},f=()=>{n.value<u.images.length-1&&s(n.value+1)},m=()=>{n.value!==0&&s(n.value-1)};return o.onMounted(()=>{const e={root:t.value,rootMargin:"0px",threshold:.6};i.value=l.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)}),o.onUnmounted(()=>{i.value.forEach(e=>e.disconnect())}),{emit:a,currentImage:n,carouselItem:l,carouselItems:t,initialised:r,next:f,previous:m,scrollTo:s}}});module.exports=L;
//# sourceMappingURL=NeonImageCarousel.cjs.js.map