@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 t=require("vue"),L=require("../../navigation/link/NeonLink.vue.cjs.js"),x=require("../../user-input/button/NeonButton.vue.cjs.js"),I=require("../../layout/stack/NeonStack.vue.cjs.js"),q=t.defineComponent({name:"NeonImageCarousel",components:{NeonButton:x,NeonLink:L,NeonStack:I},props:{expanded:{type:Boolean,default:!1},images:{type:Array,required:!0},imageCountLabel:{type:String,default:void 0},hideLabel:{type:Boolean,default:!1},closeLabel:{type:String,default:"Close"},previousLabel:{type:String,default:"Previous"},nextLabel:{type:String,default:"Next"}},emits:["current-image","update:expanded"],setup(l,{emit:s}){const u=t.ref(!1),o=t.ref(0),a=t.ref(null),c=t.ref([]),i=t.ref([]),n=t.ref(!1),d=e=>{e!==o.value&&(o.value=e,s("current-image",e))},r=e=>{a.value&&l.images.length>0&&(d(e),a.value.scrollTo(a.value.clientWidth*e,0))},f=()=>{o.value<l.images.length-1&&r(o.value+1)},m=()=>{o.value!==0&&r(o.value-1)};t.onMounted(()=>{const e={root:a.value,rootMargin:"0px",threshold:.6};i.value=c.value.map((g,b)=>{const v=new IntersectionObserver(h=>{h.forEach(y=>{u.value&&y.isIntersecting&&d(b)})},e);return v.observe(g),v}),setTimeout(()=>{a.value&&a.value.scrollLeft!==0&&(a.value.scrollLeft=0),u.value=!0},50)}),t.onUnmounted(()=>{i.value.forEach(e=>e.disconnect())});const p=()=>{n.value=!n.value,s("update:expanded",n.value)};return t.watch(()=>n.value,e=>{e?document.body.classList.add("neon-closable--open"):document.body.classList.remove("neon-closable--open")},{immediate:!0}),t.watch(()=>l.expanded,e=>{n.value!==e&&(n.value=e)},{immediate:!0}),{emit:s,currentImage:o,carouselItem:c,carouselItems:a,initialised:u,isExpanded:n,next:f,previous:m,scrollTo:r,toggleExpanded:p}}});module.exports=q;
//# sourceMappingURL=NeonImageCarousel.cjs.js.map