vue3-carousel - npm Package Compare versions

Comparing version 0.8.0 to 0.8.1

CHANGELOG.md

@@ -5,2 +5,7 @@ # Changelog
 
+## [0.8.0](https://github.com/ismail9k/vue3-carousel/releases/tag/v0.8.0) - 2024-11-24
+
+- fix: invalid type for prop height by @aovcina in #425
+- Feat support enable disable carousel by @ismail9k in #426
+  
 ## [0.7.1](https://github.com/ismail9k/vue3-carousel/releases/tag/v0.7.1) - 2024-11-17
@@ -7,0 +12,0 @@

dist/carousel.d.ts

 import * as vue from 'vue';
-import { VNode } from 'vue';
+import { Ref, VNode } from 'vue';
 
@@ -62,9 +62,28 @@ interface Data$1 {
 interface CarouselNav {
-  [key: string]: any
+  slideTo: (index: number) => void
+  next: () => void
+  prev: () => void
 }
 
-interface ElementStyleObject {
-  [key: string]: any
+interface CarouselData {
+  config: CarouselConfig
+  slidesCount: Ref<number>
+  slideSize: Ref<number>
+  currentSlide: Ref<number>
+  maxSlide: Ref<number>
+  minSlide: Ref<number>
+  middleSlide: Ref<number>
 }
 
+interface CarouselMethods extends CarouselNav {
+  updateBreakpointsConfig: () => void
+  updateSlidesData: () => void
+  updateSlideSize: () => void
+  restartCarousel: () => void
+}
+interface CarouselExposed extends CarouselMethods {
+  nav: CarouselNav
+  data: CarouselData
+}
+
 declare const _default$1: vue.DefineComponent<{
@@ -90,3 +109,3 @@ enabled: boolean;
     [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, "drag" | "init" | "slide-start" | "loop" | "update:modelValue" | "slide-end" | "before-init", vue.PublicProps, Readonly<{
     enabled: boolean;
@@ -178,2 +197,2 @@ itemsToShow: number;
 
-export { type BreakpointMode, type Breakpoints, _default$1 as Carousel, type CarouselConfig, type CarouselNav, type Data$1 as Data, type Dir, type ElementStyleObject, type I18nKeys, Icon, Navigation, Pagination, _default as Slide, type SnapAlign };
+export { type BreakpointMode, type Breakpoints, _default$1 as Carousel, type CarouselConfig, type CarouselData, type CarouselExposed, type CarouselMethods, type CarouselNav, type Data$1 as Data, type Dir, type I18nKeys, Icon, Navigation, Pagination, _default as Slide, type SnapAlign };

dist/carousel.es.js

 /**
- * Vue 3 Carousel 0.8.0
+ * Vue 3 Carousel 0.8.1
  * (c) 2024
@@ -313,2 +313,11 @@ * @license MIT
     props: carouselProps,
+    emits: [
+        'init',
+        'drag',
+        'slide-start',
+        'loop',
+        'update:modelValue',
+        'slide-end',
+        'before-init',
+    ],
     setup(props, { slots, emit, expose }) {
@@ -620,5 +629,2 @@ var _a;
             slideSize,
-            next,
-            prev,
-            slideTo,
             currentSlide: currentSlideIndex,
@@ -674,3 +680,10 @@ maxSlide: maxSlideIndex,
             const addonsElements = (slotAddons === null || slotAddons === void 0 ? void 0 : slotAddons(slotsProps)) || [];
-            slidesElements.forEach((el, index) => (el.props.index = index));
+            slidesElements.forEach((el, index) => {
+                if (el.props) {
+                    el.props.index = index;
+                }
+                else {
+                    el.props = { index };
+                }
+            });
             let output = slidesElements;
@@ -677,0 +690,0 @@ if (config.wrapAround) {

dist/carousel.es.min.js

 /**
- * Vue 3 Carousel 0.8.0
+ * Vue 3 Carousel 0.8.1
  * (c) 2024
  * @license MIT
  */
-import{Fragment as e,defineComponent as t,inject as l,reactive as a,ref as n,h as i,computed as o,provide as r,onMounted as u,nextTick as s,onUnmounted as d,watch as c,cloneVNode as v}from"vue";const p=["center","start","end","center-even","center-odd"],m=["viewport","carousel"],g=["ltr","left-to-right","rtl","right-to-left","ttb","top-to-bottom","btt","bottom-to-top"],f={enabled:!0,itemsToShow:1,itemsToScroll:1,modelValue:0,transition:300,autoplay:0,gap:0,height:"auto",wrapAround:!1,pauseAutoplayOnHover:!1,mouseDrag:!0,touchDrag:!0,snapAlign:p[0],dir:g[0],breakpointMode:m[0],breakpoints:void 0,i18n:{ariaNextSlide:"Navigate to next slide",ariaPreviousSlide:"Navigate to previous slide",ariaNavigateToSlide:"Navigate to slide {slideNumber}",ariaGallery:"Gallery",itemXofY:"Item {currentSlide} of {slidesCount}",iconArrowUp:"Arrow pointing upwards",iconArrowDown:"Arrow pointing downwards",iconArrowRight:"Arrow pointing to the right",iconArrowLeft:"Arrow pointing to the left"}},h={enabled:{default:f.enabled,type:Boolean},itemsToShow:{default:f.itemsToShow,type:Number},itemsToScroll:{default:f.itemsToScroll,type:Number},wrapAround:{default:f.wrapAround,type:Boolean},gap:{default:f.gap,type:Number},height:{default:f.height,type:[Number,String]},snapAlign:{default:f.snapAlign,validator:e=>p.includes(e)},transition:{default:f.transition,type:Number},breakpointMode:{default:f.breakpointMode,validator:e=>m.includes(e)},breakpoints:{default:f.breakpoints,type:Object},autoplay:{default:f.autoplay,type:Number},pauseAutoplayOnHover:{default:f.pauseAutoplayOnHover,type:Boolean},modelValue:{default:void 0,type:Number},mouseDrag:{default:f.mouseDrag,type:Boolean},touchDrag:{default:f.touchDrag,type:Boolean},dir:{default:f.dir,validator:e=>g.includes(e)},i18n:{default:f.i18n,type:Object}};function b({val:e,max:t,min:l}){return t<l?e:Math.min(Math.max(e,l),t)}function w(t){return t?t.reduce(((t,l)=>{var a;return l.type===e?[...t,...w(l.children)]:"CarouselSlide"===(null===(a=l.type)||void 0===a?void 0:a.name)?[...t,l]:t}),[]):[]}function S({val:e,max:t,min:l=0}){const a=t-l+1;return((e-l)%a+a)%a+l}function x(e="",t={}){return Object.entries(t).reduce(((e,[t,l])=>e.replace(`{${t}}`,String(l))),e)}var y,A=t({name:"ARIA",setup(){const e=l("config",a(Object.assign({},f))),t=l("currentSlide",n(0)),o=l("slidesCount",n(0));return()=>i("div",{class:["carousel__liveregion","carousel__sr-only"],"aria-live":"polite","aria-atomic":"true"},x(e.i18n.itemXofY,{currentSlide:t.value+1,slidesCount:o.value}))}}),_=t({name:"Carousel",props:h,setup(e,{slots:t,emit:l,expose:p}){var m;const g=n(null),h=n(null),x=n([]),y=n(0),_=n(0),T=o((()=>Object.assign(Object.assign(Object.assign({},f),e),{i18n:Object.assign(Object.assign({},f.i18n),e.i18n),breakpoints:void 0}))),C=a(Object.assign({},T.value)),M=n(null!==(m=e.modelValue)&&void 0!==m?m:0),N=n(0),O=n(0),k=n(0),L=n(0);let j=null,D=null,z=null;const E=o((()=>y.value+C.gap)),I=o((()=>{const e=C.dir||"lrt";return{"left-to-right":"ltr","right-to-left":"rtl","top-to-bottom":"ttb","bottom-to-top":"btt"}[e]||e})),$=o((()=>["ttb","btt"].includes(I.value)));function R(){var t;const l=("carousel"===C.breakpointMode?null===(t=g.value)||void 0===t?void 0:t.getBoundingClientRect().width:window.innerWidth)||0,a=Object.keys(e.breakpoints||{}).map((e=>Number(e))).sort(((e,t)=>+t-+e));let n=Object.assign({},T.value);a.some((t=>{var a;return l>=t&&(n=Object.assign(Object.assign({},n),null===(a=e.breakpoints)||void 0===a?void 0:a[t]),!0)})),Object.assign(C,n)}r("config",C),r("slidesCount",_),r("currentSlide",M),r("maxSlide",k),r("minSlide",L),r("slideSize",y),r("isVertical",$),r("normalizeDir",I);const B=function(e,t){let l;return function(...a){l&&clearTimeout(l),l=setTimeout((()=>{e(...a),l=null}),t)}}((()=>{R(),U(),X()}),16);function X(){if(!h.value)return;const e=h.value.getBoundingClientRect(),t=(C.itemsToShow-1)*C.gap;$.value?y.value=(e.height-t)/C.itemsToShow:y.value=(e.width-t)/C.itemsToShow}function U(){_.value<=0||(O.value=Math.ceil((_.value-1)/2),k.value=function({config:e,slidesCount:t}){var l;const{snapAlign:a="N/A",wrapAround:n,itemsToShow:i=1}=e;if(n)return Math.max(t-1,0);const o=null!==(l={start:Math.ceil(t-i),end:Math.ceil(t-1),center:t-Math.ceil((i-.5)/2),"center-odd":t-Math.ceil((i-.5)/2),"center-even":t-Math.ceil(i/2)}[a])&&void 0!==l?l:0;return Math.max(o,0)}({config:C,slidesCount:_.value}),L.value=function({config:e,slidesCount:t}){var l;const{snapAlign:a="N/A",wrapAround:n,itemsToShow:i=1}=e;return n||i>t?0:null!==(l={start:0,end:Math.floor(i-1),center:Math.floor((i-1)/2),"center-odd":Math.floor((i-1)/2),"center-even":Math.floor((i-2)/2)}[a])&&void 0!==l?l:0}({config:C,slidesCount:_.value}),C.wrapAround||(M.value=b({val:M.value,max:k.value,min:L.value})))}u((()=>{s((()=>X())),setTimeout((()=>X()),1e3),R(),Q(),window.addEventListener("resize",B,{passive:!0}),z=new ResizeObserver(B),g.value&&z.observe(g.value),l("init")})),d((()=>{D&&clearTimeout(D),j&&clearInterval(j),z&&g.value&&(z.unobserve(g.value),z=null),window.removeEventListener("resize",B,{passive:!0})}));let V=!1;const Y={x:0,y:0},P=a({x:0,y:0}),H=n(!1),G=n(!1),q=()=>{H.value=!0},F=()=>{H.value=!1};function W(e){const t=e.target.tagName;if(["INPUT","TEXTAREA","SELECT"].includes(t)||ee.value)return;if(V="touchstart"===e.type,!V&&(e.preventDefault(),0!==e.button))return;Y.x=V?e.touches[0].clientX:e.clientX,Y.y=V?e.touches[0].clientY:e.clientY;const l=V?"touchmove":"mousemove",a=V?"touchend":"mouseup";document.addEventListener(l,J,{passive:!1}),document.addEventListener(a,K,{passive:!0})}const J=function(e){let t=!1;return function(...l){t||(t=!0,requestAnimationFrame((()=>{e.apply(this,l),t=!1})))}}((e=>{G.value=!0;const t=V?e.touches[0].clientX:e.clientX,a=V?e.touches[0].clientY:e.clientY,n=t-Y.x,i=a-Y.y;P.x=n,P.y=i,l("drag",{deltaX:n,deltaY:i})}));function K(){const e=$.value?"y":"x",t=["rtl","btt"].includes(I.value)?-1:1,l=.4*Math.sign(P[e]),a=Math.round(P[e]/E.value+l)*t;if(a&&!V){const e=t=>{t.preventDefault(),window.removeEventListener("click",e)};window.addEventListener("click",e)}te(M.value-a),P.x=0,P.y=0,G.value=!1;const n=V?"touchmove":"mousemove",i=V?"touchend":"mouseup";document.removeEventListener(n,J),document.removeEventListener(i,K)}function Q(){!C.autoplay||C.autoplay<=0||(j=setInterval((()=>{C.pauseAutoplayOnHover&&H.value||le()}),C.autoplay))}function Z(){j&&(clearInterval(j),j=null),Q()}const ee=n(!1);function te(e){const t=C.wrapAround?e:b({val:e,max:k.value,min:L.value});M.value===t||ee.value||(l("slide-start",{slidingToIndex:e,currentSlideIndex:M.value,prevSlideIndex:N.value,slidesCount:_.value}),ee.value=!0,N.value=M.value,M.value=t,D=setTimeout((()=>{if(C.wrapAround){const a=S({val:t,max:k.value,min:0});a!==M.value&&(M.value=a,l("loop",{currentSlideIndex:M.value,slidingToIndex:e}))}l("update:modelValue",M.value),l("slide-end",{currentSlideIndex:M.value,prevSlideIndex:N.value,slidesCount:_.value}),ee.value=!1,Z()}),C.transition))}function le(){te(M.value+C.itemsToScroll)}function ae(){te(M.value-C.itemsToScroll)}const ne={slideTo:te,next:le,prev:ae};function ie(){R(),U(),X(),Z()}r("nav",ne),r("isSliding",ee),c((()=>Object.assign({},e)),ie,{deep:!0}),c((()=>e.modelValue),(e=>{e!==M.value&&te(Number(e))})),c(_,U),l("before-init");const oe={config:C,slidesCount:_,slideSize:y,next:le,prev:ae,slideTo:te,currentSlide:M,maxSlide:k,minSlide:L,middleSlide:O};p({updateBreakpointsConfig:R,updateSlidesData:U,updateSlideSize:X,restartCarousel:ie,slideTo:te,next:le,prev:ae,nav:ne,data:oe});const re=o((()=>{const e=function({config:e,currentSlide:t,slidesCount:l}){const{snapAlign:a="N/A",wrapAround:n,itemsToShow:i=1}=e,o=((e,t)=>{var l;return null!==(l={start:0,center:(t-1)/2,"center-odd":(t-1)/2,"center-even":(t-2)/2,end:t-1}[e])&&void 0!==l?l:0})(a,i);return n?t-o:b({val:t-o,max:l-i,min:0})}({config:C,currentSlide:M.value,slidesCount:_.value}),t=C.wrapAround?_.value:0,l=["rtl","btt"].includes(I.value)?-1:1,a=(e+t)*E.value*l,n=$.value?P.y:P.x;return`translate${$.value?"Y":"X"}(${n-a}px)`})),ue=t.default||t.slides,se=t.addons,de=a(oe);return()=>{if(!C.enabled)return i("section",{ref:g,class:["carousel","is-disabled"]},null==ue?void 0:ue());const e=w(null==ue?void 0:ue(de)),t=(null==se?void 0:se(de))||[];e.forEach(((e,t)=>e.props.index=t));let l=e;if(C.wrapAround){const t=e.map(((t,l)=>v(t,{index:-e.length+l,isClone:!0,key:`clone-before-${l}`}))),a=e.map(((t,l)=>v(t,{index:e.length+l,isClone:!0,key:`clone-after-${l}`})));l=[...t,...e,...a]}x.value=e,_.value=Math.max(e.length,1);const a=i("ol",{class:"carousel__track",style:{transform:re.value,transition:`${ee.value?C.transition:0}ms`,gap:`${C.gap}px`},onMousedownCapture:C.mouseDrag?W:null,onTouchstartPassiveCapture:C.touchDrag?W:null},l),n=i("div",{class:"carousel__viewport",ref:h},a);return i("section",{ref:g,class:["carousel",`is-${I.value}`,{"is-vertical":$.value,"is-sliding":ee.value,"is-dragging":G.value,"is-hover":H.value}],style:{"--vc-trk-height":`${"number"==typeof C.height?`${C.height}px`:C.height}`},dir:I.value,"aria-label":C.i18n.ariaGallery,tabindex:"0",onMouseenter:q,onMouseleave:F},[n,t,i(A)])}}});!function(e){e.arrowUp="arrowUp",e.arrowDown="arrowDown",e.arrowRight="arrowRight",e.arrowLeft="arrowLeft"}(y||(y={}));const T={arrowUp:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z",arrowDown:"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z",arrowRight:"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z",arrowLeft:"M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"};const C=e=>{const t=l("config",a(Object.assign({},f))),n=String(e.name),o=`icon${n.charAt(0).toUpperCase()+n.slice(1)}`;if(!n||"string"!=typeof n||!(n in y))return;const r=i("path",{d:T[n]}),u=t.i18n[o]||e.title||n,s=i("title",u);return i("svg",{class:"carousel__icon",viewBox:"0 0 24 24",role:"img","aria-label":u},[s,r])};C.props={name:String,title:String};const M=(e,{slots:t,attrs:o})=>{const{next:r,prev:u}=t||{},s=l("config",a(Object.assign({},f))),d=l("maxSlide",n(1)),c=l("minSlide",n(1)),v=l("normalizeDir",n("ltr")),p=l("currentSlide",n(1)),m=l("nav",{}),{wrapAround:g,i18n:h}=s;return[i("button",{type:"button",class:["carousel__prev",!g&&p.value<=c.value&&"carousel__prev--disabled",null==o?void 0:o.class],"aria-label":h.ariaPreviousSlide,title:h.ariaPreviousSlide,onClick:m.prev},(null==u?void 0:u())||i(C,{name:{ltr:"arrowLeft",rtl:"arrowRight",ttb:"arrowUp",btt:"arrowDown"}[v.value]})),i("button",{type:"button",class:["carousel__next",!g&&p.value>=d.value&&"carousel__next--disabled",null==o?void 0:o.class],"aria-label":h.ariaNextSlide,title:h.ariaNextSlide,onClick:m.next},(null==r?void 0:r())||i(C,{name:{ltr:"arrowRight",rtl:"arrowLeft",ttb:"arrowDown",btt:"arrowUp"}[v.value]}))]},N=()=>{const e=l("config",a(Object.assign({},f))),t=l("maxSlide",n(1)),o=l("minSlide",n(1)),r=l("currentSlide",n(1)),u=l("nav",{}),s=e=>S({val:r.value,max:t.value,min:0})===e,d=[];for(let l=o.value;l<t.value+1;l++){const t=x(e.i18n.ariaNavigateToSlide,{slideNumber:l+1}),a=i("button",{type:"button",class:{"carousel__pagination-button":!0,"carousel__pagination-button--active":s(l)},"aria-label":t,title:t,onClick:()=>u.slideTo(l)}),n=i("li",{class:"carousel__pagination-item",key:l},a);d.push(n)}return i("ol",{class:"carousel__pagination"},d)};var O=t({name:"CarouselSlide",props:{index:{type:Number,default:1},isClone:{type:Boolean,default:!1}},setup(e,{slots:t}){const r=l("config",a(Object.assign({},f))),u=l("currentSlide",n(0)),s=l("slidesToScroll",n(0)),d=l("isSliding",n(!1)),c=l("isVertical",n(!1)),v=l("slideSize",n(0)),p=o((()=>e.index===u.value)),m=o((()=>e.index===u.value-1)),g=o((()=>e.index===u.value+1)),h=o((()=>{const t=Math.floor(s.value),l=Math.ceil(s.value+r.itemsToShow-1);return e.index>=t&&e.index<=l})),b=o((()=>{const e=r.gap?`${v.value}px`:100/r.itemsToShow+"%";return c.value?{height:e,width:""}:{width:e,height:""}}));return()=>{var l,a;return r.enabled?i("li",{style:b.value,class:{carousel__slide:!0,"carousel__slide--clone":e.isClone,"carousel__slide--visible":h.value,"carousel__slide--active":p.value,"carousel__slide--prev":m.value,"carousel__slide--next":g.value,"carousel__slide--sliding":d.value},"aria-hidden":!h.value},null===(a=t.default)||void 0===a?void 0:a.call(t,{isActive:p.value,isClone:e.isClone,isPrev:m.value,isNext:g.value,isSliding:d.value,isVisible:h.value})):null===(l=t.default)||void 0===l?void 0:l.call(t)}}});export{_ as Carousel,C as Icon,M as Navigation,N as Pagination,O as Slide};
+import{Fragment as e,defineComponent as t,inject as l,reactive as a,ref as n,h as i,computed as o,provide as r,onMounted as u,nextTick as s,onUnmounted as d,watch as c,cloneVNode as v}from"vue";const p=["center","start","end","center-even","center-odd"],m=["viewport","carousel"],g=["ltr","left-to-right","rtl","right-to-left","ttb","top-to-bottom","btt","bottom-to-top"],f={enabled:!0,itemsToShow:1,itemsToScroll:1,modelValue:0,transition:300,autoplay:0,gap:0,height:"auto",wrapAround:!1,pauseAutoplayOnHover:!1,mouseDrag:!0,touchDrag:!0,snapAlign:p[0],dir:g[0],breakpointMode:m[0],breakpoints:void 0,i18n:{ariaNextSlide:"Navigate to next slide",ariaPreviousSlide:"Navigate to previous slide",ariaNavigateToSlide:"Navigate to slide {slideNumber}",ariaGallery:"Gallery",itemXofY:"Item {currentSlide} of {slidesCount}",iconArrowUp:"Arrow pointing upwards",iconArrowDown:"Arrow pointing downwards",iconArrowRight:"Arrow pointing to the right",iconArrowLeft:"Arrow pointing to the left"}},h={enabled:{default:f.enabled,type:Boolean},itemsToShow:{default:f.itemsToShow,type:Number},itemsToScroll:{default:f.itemsToScroll,type:Number},wrapAround:{default:f.wrapAround,type:Boolean},gap:{default:f.gap,type:Number},height:{default:f.height,type:[Number,String]},snapAlign:{default:f.snapAlign,validator:e=>p.includes(e)},transition:{default:f.transition,type:Number},breakpointMode:{default:f.breakpointMode,validator:e=>m.includes(e)},breakpoints:{default:f.breakpoints,type:Object},autoplay:{default:f.autoplay,type:Number},pauseAutoplayOnHover:{default:f.pauseAutoplayOnHover,type:Boolean},modelValue:{default:void 0,type:Number},mouseDrag:{default:f.mouseDrag,type:Boolean},touchDrag:{default:f.touchDrag,type:Boolean},dir:{default:f.dir,validator:e=>g.includes(e)},i18n:{default:f.i18n,type:Object}};function b({val:e,max:t,min:l}){return t<l?e:Math.min(Math.max(e,l),t)}function w(t){return t?t.reduce(((t,l)=>{var a;return l.type===e?[...t,...w(l.children)]:"CarouselSlide"===(null===(a=l.type)||void 0===a?void 0:a.name)?[...t,l]:t}),[]):[]}function S({val:e,max:t,min:l=0}){const a=t-l+1;return((e-l)%a+a)%a+l}function x(e="",t={}){return Object.entries(t).reduce(((e,[t,l])=>e.replace(`{${t}}`,String(l))),e)}var y,A=t({name:"ARIA",setup(){const e=l("config",a(Object.assign({},f))),t=l("currentSlide",n(0)),o=l("slidesCount",n(0));return()=>i("div",{class:["carousel__liveregion","carousel__sr-only"],"aria-live":"polite","aria-atomic":"true"},x(e.i18n.itemXofY,{currentSlide:t.value+1,slidesCount:o.value}))}}),_=t({name:"Carousel",props:h,emits:["init","drag","slide-start","loop","update:modelValue","slide-end","before-init"],setup(e,{slots:t,emit:l,expose:p}){var m;const g=n(null),h=n(null),x=n([]),y=n(0),_=n(0),T=o((()=>Object.assign(Object.assign(Object.assign({},f),e),{i18n:Object.assign(Object.assign({},f.i18n),e.i18n),breakpoints:void 0}))),C=a(Object.assign({},T.value)),M=n(null!==(m=e.modelValue)&&void 0!==m?m:0),N=n(0),O=n(0),k=n(0),L=n(0);let j=null,D=null,z=null;const E=o((()=>y.value+C.gap)),I=o((()=>{const e=C.dir||"lrt";return{"left-to-right":"ltr","right-to-left":"rtl","top-to-bottom":"ttb","bottom-to-top":"btt"}[e]||e})),$=o((()=>["ttb","btt"].includes(I.value)));function R(){var t;const l=("carousel"===C.breakpointMode?null===(t=g.value)||void 0===t?void 0:t.getBoundingClientRect().width:window.innerWidth)||0,a=Object.keys(e.breakpoints||{}).map((e=>Number(e))).sort(((e,t)=>+t-+e));let n=Object.assign({},T.value);a.some((t=>{var a;return l>=t&&(n=Object.assign(Object.assign({},n),null===(a=e.breakpoints)||void 0===a?void 0:a[t]),!0)})),Object.assign(C,n)}r("config",C),r("slidesCount",_),r("currentSlide",M),r("maxSlide",k),r("minSlide",L),r("slideSize",y),r("isVertical",$),r("normalizeDir",I);const B=function(e,t){let l;return function(...a){l&&clearTimeout(l),l=setTimeout((()=>{e(...a),l=null}),t)}}((()=>{R(),X(),V()}),16);function V(){if(!h.value)return;const e=h.value.getBoundingClientRect(),t=(C.itemsToShow-1)*C.gap;$.value?y.value=(e.height-t)/C.itemsToShow:y.value=(e.width-t)/C.itemsToShow}function X(){_.value<=0||(O.value=Math.ceil((_.value-1)/2),k.value=function({config:e,slidesCount:t}){var l;const{snapAlign:a="N/A",wrapAround:n,itemsToShow:i=1}=e;if(n)return Math.max(t-1,0);const o=null!==(l={start:Math.ceil(t-i),end:Math.ceil(t-1),center:t-Math.ceil((i-.5)/2),"center-odd":t-Math.ceil((i-.5)/2),"center-even":t-Math.ceil(i/2)}[a])&&void 0!==l?l:0;return Math.max(o,0)}({config:C,slidesCount:_.value}),L.value=function({config:e,slidesCount:t}){var l;const{snapAlign:a="N/A",wrapAround:n,itemsToShow:i=1}=e;return n||i>t?0:null!==(l={start:0,end:Math.floor(i-1),center:Math.floor((i-1)/2),"center-odd":Math.floor((i-1)/2),"center-even":Math.floor((i-2)/2)}[a])&&void 0!==l?l:0}({config:C,slidesCount:_.value}),C.wrapAround||(M.value=b({val:M.value,max:k.value,min:L.value})))}u((()=>{s((()=>V())),setTimeout((()=>V()),1e3),R(),Q(),window.addEventListener("resize",B,{passive:!0}),z=new ResizeObserver(B),g.value&&z.observe(g.value),l("init")})),d((()=>{D&&clearTimeout(D),j&&clearInterval(j),z&&g.value&&(z.unobserve(g.value),z=null),window.removeEventListener("resize",B,{passive:!0})}));let U=!1;const Y={x:0,y:0},P=a({x:0,y:0}),H=n(!1),G=n(!1),q=()=>{H.value=!0},F=()=>{H.value=!1};function W(e){const t=e.target.tagName;if(["INPUT","TEXTAREA","SELECT"].includes(t)||ee.value)return;if(U="touchstart"===e.type,!U&&(e.preventDefault(),0!==e.button))return;Y.x=U?e.touches[0].clientX:e.clientX,Y.y=U?e.touches[0].clientY:e.clientY;const l=U?"touchmove":"mousemove",a=U?"touchend":"mouseup";document.addEventListener(l,J,{passive:!1}),document.addEventListener(a,K,{passive:!0})}const J=function(e){let t=!1;return function(...l){t||(t=!0,requestAnimationFrame((()=>{e.apply(this,l),t=!1})))}}((e=>{G.value=!0;const t=U?e.touches[0].clientX:e.clientX,a=U?e.touches[0].clientY:e.clientY,n=t-Y.x,i=a-Y.y;P.x=n,P.y=i,l("drag",{deltaX:n,deltaY:i})}));function K(){const e=$.value?"y":"x",t=["rtl","btt"].includes(I.value)?-1:1,l=.4*Math.sign(P[e]),a=Math.round(P[e]/E.value+l)*t;if(a&&!U){const e=t=>{t.preventDefault(),window.removeEventListener("click",e)};window.addEventListener("click",e)}te(M.value-a),P.x=0,P.y=0,G.value=!1;const n=U?"touchmove":"mousemove",i=U?"touchend":"mouseup";document.removeEventListener(n,J),document.removeEventListener(i,K)}function Q(){!C.autoplay||C.autoplay<=0||(j=setInterval((()=>{C.pauseAutoplayOnHover&&H.value||le()}),C.autoplay))}function Z(){j&&(clearInterval(j),j=null),Q()}const ee=n(!1);function te(e){const t=C.wrapAround?e:b({val:e,max:k.value,min:L.value});M.value===t||ee.value||(l("slide-start",{slidingToIndex:e,currentSlideIndex:M.value,prevSlideIndex:N.value,slidesCount:_.value}),ee.value=!0,N.value=M.value,M.value=t,D=setTimeout((()=>{if(C.wrapAround){const a=S({val:t,max:k.value,min:0});a!==M.value&&(M.value=a,l("loop",{currentSlideIndex:M.value,slidingToIndex:e}))}l("update:modelValue",M.value),l("slide-end",{currentSlideIndex:M.value,prevSlideIndex:N.value,slidesCount:_.value}),ee.value=!1,Z()}),C.transition))}function le(){te(M.value+C.itemsToScroll)}function ae(){te(M.value-C.itemsToScroll)}const ne={slideTo:te,next:le,prev:ae};function ie(){R(),X(),V(),Z()}r("nav",ne),r("isSliding",ee),c((()=>Object.assign({},e)),ie,{deep:!0}),c((()=>e.modelValue),(e=>{e!==M.value&&te(Number(e))})),c(_,X),l("before-init");const oe={config:C,slidesCount:_,slideSize:y,currentSlide:M,maxSlide:k,minSlide:L,middleSlide:O};p({updateBreakpointsConfig:R,updateSlidesData:X,updateSlideSize:V,restartCarousel:ie,slideTo:te,next:le,prev:ae,nav:ne,data:oe});const re=o((()=>{const e=function({config:e,currentSlide:t,slidesCount:l}){const{snapAlign:a="N/A",wrapAround:n,itemsToShow:i=1}=e,o=((e,t)=>{var l;return null!==(l={start:0,center:(t-1)/2,"center-odd":(t-1)/2,"center-even":(t-2)/2,end:t-1}[e])&&void 0!==l?l:0})(a,i);return n?t-o:b({val:t-o,max:l-i,min:0})}({config:C,currentSlide:M.value,slidesCount:_.value}),t=C.wrapAround?_.value:0,l=["rtl","btt"].includes(I.value)?-1:1,a=(e+t)*E.value*l,n=$.value?P.y:P.x;return`translate${$.value?"Y":"X"}(${n-a}px)`})),ue=t.default||t.slides,se=t.addons,de=a(oe);return()=>{if(!C.enabled)return i("section",{ref:g,class:["carousel","is-disabled"]},null==ue?void 0:ue());const e=w(null==ue?void 0:ue(de)),t=(null==se?void 0:se(de))||[];e.forEach(((e,t)=>{e.props?e.props.index=t:e.props={index:t}}));let l=e;if(C.wrapAround){const t=e.map(((t,l)=>v(t,{index:-e.length+l,isClone:!0,key:`clone-before-${l}`}))),a=e.map(((t,l)=>v(t,{index:e.length+l,isClone:!0,key:`clone-after-${l}`})));l=[...t,...e,...a]}x.value=e,_.value=Math.max(e.length,1);const a=i("ol",{class:"carousel__track",style:{transform:re.value,transition:`${ee.value?C.transition:0}ms`,gap:`${C.gap}px`},onMousedownCapture:C.mouseDrag?W:null,onTouchstartPassiveCapture:C.touchDrag?W:null},l),n=i("div",{class:"carousel__viewport",ref:h},a);return i("section",{ref:g,class:["carousel",`is-${I.value}`,{"is-vertical":$.value,"is-sliding":ee.value,"is-dragging":G.value,"is-hover":H.value}],style:{"--vc-trk-height":`${"number"==typeof C.height?`${C.height}px`:C.height}`},dir:I.value,"aria-label":C.i18n.ariaGallery,tabindex:"0",onMouseenter:q,onMouseleave:F},[n,t,i(A)])}}});!function(e){e.arrowUp="arrowUp",e.arrowDown="arrowDown",e.arrowRight="arrowRight",e.arrowLeft="arrowLeft"}(y||(y={}));const T={arrowUp:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z",arrowDown:"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z",arrowRight:"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z",arrowLeft:"M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"};const C=e=>{const t=l("config",a(Object.assign({},f))),n=String(e.name),o=`icon${n.charAt(0).toUpperCase()+n.slice(1)}`;if(!n||"string"!=typeof n||!(n in y))return;const r=i("path",{d:T[n]}),u=t.i18n[o]||e.title||n,s=i("title",u);return i("svg",{class:"carousel__icon",viewBox:"0 0 24 24",role:"img","aria-label":u},[s,r])};C.props={name:String,title:String};const M=(e,{slots:t,attrs:o})=>{const{next:r,prev:u}=t||{},s=l("config",a(Object.assign({},f))),d=l("maxSlide",n(1)),c=l("minSlide",n(1)),v=l("normalizeDir",n("ltr")),p=l("currentSlide",n(1)),m=l("nav",{}),{wrapAround:g,i18n:h}=s;return[i("button",{type:"button",class:["carousel__prev",!g&&p.value<=c.value&&"carousel__prev--disabled",null==o?void 0:o.class],"aria-label":h.ariaPreviousSlide,title:h.ariaPreviousSlide,onClick:m.prev},(null==u?void 0:u())||i(C,{name:{ltr:"arrowLeft",rtl:"arrowRight",ttb:"arrowUp",btt:"arrowDown"}[v.value]})),i("button",{type:"button",class:["carousel__next",!g&&p.value>=d.value&&"carousel__next--disabled",null==o?void 0:o.class],"aria-label":h.ariaNextSlide,title:h.ariaNextSlide,onClick:m.next},(null==r?void 0:r())||i(C,{name:{ltr:"arrowRight",rtl:"arrowLeft",ttb:"arrowDown",btt:"arrowUp"}[v.value]}))]},N=()=>{const e=l("config",a(Object.assign({},f))),t=l("maxSlide",n(1)),o=l("minSlide",n(1)),r=l("currentSlide",n(1)),u=l("nav",{}),s=e=>S({val:r.value,max:t.value,min:0})===e,d=[];for(let l=o.value;l<t.value+1;l++){const t=x(e.i18n.ariaNavigateToSlide,{slideNumber:l+1}),a=i("button",{type:"button",class:{"carousel__pagination-button":!0,"carousel__pagination-button--active":s(l)},"aria-label":t,title:t,onClick:()=>u.slideTo(l)}),n=i("li",{class:"carousel__pagination-item",key:l},a);d.push(n)}return i("ol",{class:"carousel__pagination"},d)};var O=t({name:"CarouselSlide",props:{index:{type:Number,default:1},isClone:{type:Boolean,default:!1}},setup(e,{slots:t}){const r=l("config",a(Object.assign({},f))),u=l("currentSlide",n(0)),s=l("slidesToScroll",n(0)),d=l("isSliding",n(!1)),c=l("isVertical",n(!1)),v=l("slideSize",n(0)),p=o((()=>e.index===u.value)),m=o((()=>e.index===u.value-1)),g=o((()=>e.index===u.value+1)),h=o((()=>{const t=Math.floor(s.value),l=Math.ceil(s.value+r.itemsToShow-1);return e.index>=t&&e.index<=l})),b=o((()=>{const e=r.gap?`${v.value}px`:100/r.itemsToShow+"%";return c.value?{height:e,width:""}:{width:e,height:""}}));return()=>{var l,a;return r.enabled?i("li",{style:b.value,class:{carousel__slide:!0,"carousel__slide--clone":e.isClone,"carousel__slide--visible":h.value,"carousel__slide--active":p.value,"carousel__slide--prev":m.value,"carousel__slide--next":g.value,"carousel__slide--sliding":d.value},"aria-hidden":!h.value},null===(a=t.default)||void 0===a?void 0:a.call(t,{isActive:p.value,isClone:e.isClone,isPrev:m.value,isNext:g.value,isSliding:d.value,isVisible:h.value})):null===(l=t.default)||void 0===l?void 0:l.call(t)}}});export{_ as Carousel,C as Icon,M as Navigation,N as Pagination,O as Slide};

dist/carousel.js

 /**
- * Vue 3 Carousel 0.8.0
+ * Vue 3 Carousel 0.8.1
  * (c) 2024
@@ -317,2 +317,11 @@ * @license MIT
         props: carouselProps,
+        emits: [
+            'init',
+            'drag',
+            'slide-start',
+            'loop',
+            'update:modelValue',
+            'slide-end',
+            'before-init',
+        ],
         setup(props, { slots, emit, expose }) {
@@ -624,5 +633,2 @@ var _a;
                 slideSize,
-                next,
-                prev,
-                slideTo,
                 currentSlide: currentSlideIndex,
@@ -678,3 +684,10 @@ maxSlide: maxSlideIndex,
                 const addonsElements = (slotAddons === null || slotAddons === void 0 ? void 0 : slotAddons(slotsProps)) || [];
-                slidesElements.forEach((el, index) => (el.props.index = index));
+                slidesElements.forEach((el, index) => {
+                    if (el.props) {
+                        el.props.index = index;
+                    }
+                    else {
+                        el.props = { index };
+                    }
+                });
                 let output = slidesElements;
@@ -681,0 +694,0 @@ if (config.wrapAround) {

dist/carousel.min.js

 /**
- * Vue 3 Carousel 0.8.0
+ * Vue 3 Carousel 0.8.1
  * (c) 2024
  * @license MIT
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueCarousel={},e.Vue)}(this,(function(e,t){"use strict";const n=["center","start","end","center-even","center-odd"],i=["viewport","carousel"],a=["ltr","left-to-right","rtl","right-to-left","ttb","top-to-bottom","btt","bottom-to-top"],l={enabled:!0,itemsToShow:1,itemsToScroll:1,modelValue:0,transition:300,autoplay:0,gap:0,height:"auto",wrapAround:!1,pauseAutoplayOnHover:!1,mouseDrag:!0,touchDrag:!0,snapAlign:n[0],dir:a[0],breakpointMode:i[0],breakpoints:void 0,i18n:{ariaNextSlide:"Navigate to next slide",ariaPreviousSlide:"Navigate to previous slide",ariaNavigateToSlide:"Navigate to slide {slideNumber}",ariaGallery:"Gallery",itemXofY:"Item {currentSlide} of {slidesCount}",iconArrowUp:"Arrow pointing upwards",iconArrowDown:"Arrow pointing downwards",iconArrowRight:"Arrow pointing to the right",iconArrowLeft:"Arrow pointing to the left"}},o={enabled:{default:l.enabled,type:Boolean},itemsToShow:{default:l.itemsToShow,type:Number},itemsToScroll:{default:l.itemsToScroll,type:Number},wrapAround:{default:l.wrapAround,type:Boolean},gap:{default:l.gap,type:Number},height:{default:l.height,type:[Number,String]},snapAlign:{default:l.snapAlign,validator:e=>n.includes(e)},transition:{default:l.transition,type:Number},breakpointMode:{default:l.breakpointMode,validator:e=>i.includes(e)},breakpoints:{default:l.breakpoints,type:Object},autoplay:{default:l.autoplay,type:Number},pauseAutoplayOnHover:{default:l.pauseAutoplayOnHover,type:Boolean},modelValue:{default:void 0,type:Number},mouseDrag:{default:l.mouseDrag,type:Boolean},touchDrag:{default:l.touchDrag,type:Boolean},dir:{default:l.dir,validator:e=>a.includes(e)},i18n:{default:l.i18n,type:Object}};function r({val:e,max:t,min:n}){return t<n?e:Math.min(Math.max(e,n),t)}function u(e){return e?e.reduce(((e,n)=>{var i;return n.type===t.Fragment?[...e,...u(n.children)]:"CarouselSlide"===(null===(i=n.type)||void 0===i?void 0:i.name)?[...e,n]:e}),[]):[]}function s({val:e,max:t,min:n=0}){const i=t-n+1;return((e-n)%i+i)%i+n}function c(e="",t={}){return Object.entries(t).reduce(((e,[t,n])=>e.replace(`{${t}}`,String(n))),e)}var d,v=t.defineComponent({name:"ARIA",setup(){const e=t.inject("config",t.reactive(Object.assign({},l))),n=t.inject("currentSlide",t.ref(0)),i=t.inject("slidesCount",t.ref(0));return()=>t.h("div",{class:["carousel__liveregion","carousel__sr-only"],"aria-live":"polite","aria-atomic":"true"},c(e.i18n.itemXofY,{currentSlide:n.value+1,slidesCount:i.value}))}}),p=t.defineComponent({name:"Carousel",props:o,setup(e,{slots:n,emit:i,expose:a}){var o;const c=t.ref(null),d=t.ref(null),p=t.ref([]),f=t.ref(0),m=t.ref(0),g=t.computed((()=>Object.assign(Object.assign(Object.assign({},l),e),{i18n:Object.assign(Object.assign({},l.i18n),e.i18n),breakpoints:void 0}))),h=t.reactive(Object.assign({},g.value)),b=t.ref(null!==(o=e.modelValue)&&void 0!==o?o:0),w=t.ref(0),S=t.ref(0),x=t.ref(0),y=t.ref(0);let j=null,A=null,_=null;const C=t.computed((()=>f.value+h.gap)),T=t.computed((()=>{const e=h.dir||"lrt";return{"left-to-right":"ltr","right-to-left":"rtl","top-to-bottom":"ttb","bottom-to-top":"btt"}[e]||e})),M=t.computed((()=>["ttb","btt"].includes(T.value)));function N(){var t;const n=("carousel"===h.breakpointMode?null===(t=c.value)||void 0===t?void 0:t.getBoundingClientRect().width:window.innerWidth)||0,i=Object.keys(e.breakpoints||{}).map((e=>Number(e))).sort(((e,t)=>+t-+e));let a=Object.assign({},g.value);i.some((t=>{var i;return n>=t&&(a=Object.assign(Object.assign({},a),null===(i=e.breakpoints)||void 0===i?void 0:i[t]),!0)})),Object.assign(h,a)}t.provide("config",h),t.provide("slidesCount",m),t.provide("currentSlide",b),t.provide("maxSlide",x),t.provide("minSlide",y),t.provide("slideSize",f),t.provide("isVertical",M),t.provide("normalizeDir",T);const O=function(e,t){let n;return function(...i){n&&clearTimeout(n),n=setTimeout((()=>{e(...i),n=null}),t)}}((()=>{N(),L(),k()}),16);function k(){if(!d.value)return;const e=d.value.getBoundingClientRect(),t=(h.itemsToShow-1)*h.gap;M.value?f.value=(e.height-t)/h.itemsToShow:f.value=(e.width-t)/h.itemsToShow}function L(){m.value<=0||(S.value=Math.ceil((m.value-1)/2),x.value=function({config:e,slidesCount:t}){var n;const{snapAlign:i="N/A",wrapAround:a,itemsToShow:l=1}=e;if(a)return Math.max(t-1,0);const o=null!==(n={start:Math.ceil(t-l),end:Math.ceil(t-1),center:t-Math.ceil((l-.5)/2),"center-odd":t-Math.ceil((l-.5)/2),"center-even":t-Math.ceil(l/2)}[i])&&void 0!==n?n:0;return Math.max(o,0)}({config:h,slidesCount:m.value}),y.value=function({config:e,slidesCount:t}){var n;const{snapAlign:i="N/A",wrapAround:a,itemsToShow:l=1}=e;return a||l>t?0:null!==(n={start:0,end:Math.floor(l-1),center:Math.floor((l-1)/2),"center-odd":Math.floor((l-1)/2),"center-even":Math.floor((l-2)/2)}[i])&&void 0!==n?n:0}({config:h,slidesCount:m.value}),h.wrapAround||(b.value=r({val:b.value,max:x.value,min:y.value})))}t.onMounted((()=>{t.nextTick((()=>k())),setTimeout((()=>k()),1e3),N(),Y(),window.addEventListener("resize",O,{passive:!0}),_=new ResizeObserver(O),c.value&&_.observe(c.value),i("init")})),t.onUnmounted((()=>{A&&clearTimeout(A),j&&clearInterval(j),_&&c.value&&(_.unobserve(c.value),_=null),window.removeEventListener("resize",O,{passive:!0})}));let D=!1;const I={x:0,y:0},z=t.reactive({x:0,y:0}),E=t.ref(!1),V=t.ref(!1),$=()=>{E.value=!0},R=()=>{E.value=!1};function B(e){const t=e.target.tagName;if(["INPUT","TEXTAREA","SELECT"].includes(t)||H.value)return;if(D="touchstart"===e.type,!D&&(e.preventDefault(),0!==e.button))return;I.x=D?e.touches[0].clientX:e.clientX,I.y=D?e.touches[0].clientY:e.clientY;const n=D?"touchmove":"mousemove",i=D?"touchend":"mouseup";document.addEventListener(n,U,{passive:!1}),document.addEventListener(i,X,{passive:!0})}const U=function(e){let t=!1;return function(...n){t||(t=!0,requestAnimationFrame((()=>{e.apply(this,n),t=!1})))}}((e=>{V.value=!0;const t=D?e.touches[0].clientX:e.clientX,n=D?e.touches[0].clientY:e.clientY,a=t-I.x,l=n-I.y;z.x=a,z.y=l,i("drag",{deltaX:a,deltaY:l})}));function X(){const e=M.value?"y":"x",t=["rtl","btt"].includes(T.value)?-1:1,n=.4*Math.sign(z[e]),i=Math.round(z[e]/C.value+n)*t;if(i&&!D){const e=t=>{t.preventDefault(),window.removeEventListener("click",e)};window.addEventListener("click",e)}G(b.value-i),z.x=0,z.y=0,V.value=!1;const a=D?"touchmove":"mousemove",l=D?"touchend":"mouseup";document.removeEventListener(a,U),document.removeEventListener(l,X)}function Y(){!h.autoplay||h.autoplay<=0||(j=setInterval((()=>{h.pauseAutoplayOnHover&&E.value||q()}),h.autoplay))}function P(){j&&(clearInterval(j),j=null),Y()}const H=t.ref(!1);function G(e){const t=h.wrapAround?e:r({val:e,max:x.value,min:y.value});b.value===t||H.value||(i("slide-start",{slidingToIndex:e,currentSlideIndex:b.value,prevSlideIndex:w.value,slidesCount:m.value}),H.value=!0,w.value=b.value,b.value=t,A=setTimeout((()=>{if(h.wrapAround){const n=s({val:t,max:x.value,min:0});n!==b.value&&(b.value=n,i("loop",{currentSlideIndex:b.value,slidingToIndex:e}))}i("update:modelValue",b.value),i("slide-end",{currentSlideIndex:b.value,prevSlideIndex:w.value,slidesCount:m.value}),H.value=!1,P()}),h.transition))}function q(){G(b.value+h.itemsToScroll)}function F(){G(b.value-h.itemsToScroll)}const W={slideTo:G,next:q,prev:F};function J(){N(),L(),k(),P()}t.provide("nav",W),t.provide("isSliding",H),t.watch((()=>Object.assign({},e)),J,{deep:!0}),t.watch((()=>e.modelValue),(e=>{e!==b.value&&G(Number(e))})),t.watch(m,L),i("before-init");const K={config:h,slidesCount:m,slideSize:f,next:q,prev:F,slideTo:G,currentSlide:b,maxSlide:x,minSlide:y,middleSlide:S};a({updateBreakpointsConfig:N,updateSlidesData:L,updateSlideSize:k,restartCarousel:J,slideTo:G,next:q,prev:F,nav:W,data:K});const Q=t.computed((()=>{const e=function({config:e,currentSlide:t,slidesCount:n}){const{snapAlign:i="N/A",wrapAround:a,itemsToShow:l=1}=e,o=((e,t)=>{var n;return null!==(n={start:0,center:(t-1)/2,"center-odd":(t-1)/2,"center-even":(t-2)/2,end:t-1}[e])&&void 0!==n?n:0})(i,l);return a?t-o:r({val:t-o,max:n-l,min:0})}({config:h,currentSlide:b.value,slidesCount:m.value}),t=h.wrapAround?m.value:0,n=["rtl","btt"].includes(T.value)?-1:1,i=(e+t)*C.value*n,a=M.value?z.y:z.x;return`translate${M.value?"Y":"X"}(${a-i}px)`})),Z=n.default||n.slides,ee=n.addons,te=t.reactive(K);return()=>{if(!h.enabled)return t.h("section",{ref:c,class:["carousel","is-disabled"]},null==Z?void 0:Z());const e=u(null==Z?void 0:Z(te)),n=(null==ee?void 0:ee(te))||[];e.forEach(((e,t)=>e.props.index=t));let i=e;if(h.wrapAround){const n=e.map(((n,i)=>t.cloneVNode(n,{index:-e.length+i,isClone:!0,key:`clone-before-${i}`}))),a=e.map(((n,i)=>t.cloneVNode(n,{index:e.length+i,isClone:!0,key:`clone-after-${i}`})));i=[...n,...e,...a]}p.value=e,m.value=Math.max(e.length,1);const a=t.h("ol",{class:"carousel__track",style:{transform:Q.value,transition:`${H.value?h.transition:0}ms`,gap:`${h.gap}px`},onMousedownCapture:h.mouseDrag?B:null,onTouchstartPassiveCapture:h.touchDrag?B:null},i),l=t.h("div",{class:"carousel__viewport",ref:d},a);return t.h("section",{ref:c,class:["carousel",`is-${T.value}`,{"is-vertical":M.value,"is-sliding":H.value,"is-dragging":V.value,"is-hover":E.value}],style:{"--vc-trk-height":`${"number"==typeof h.height?`${h.height}px`:h.height}`},dir:T.value,"aria-label":h.i18n.ariaGallery,tabindex:"0",onMouseenter:$,onMouseleave:R},[l,n,t.h(v)])}}});!function(e){e.arrowUp="arrowUp",e.arrowDown="arrowDown",e.arrowRight="arrowRight",e.arrowLeft="arrowLeft"}(d||(d={}));const f={arrowUp:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z",arrowDown:"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z",arrowRight:"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z",arrowLeft:"M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"};const m=e=>{const n=t.inject("config",t.reactive(Object.assign({},l))),i=String(e.name),a=`icon${i.charAt(0).toUpperCase()+i.slice(1)}`;if(!i||"string"!=typeof i||!(i in d))return;const o=f[i],r=t.h("path",{d:o}),u=n.i18n[a]||e.title||i,s=t.h("title",u);return t.h("svg",{class:"carousel__icon",viewBox:"0 0 24 24",role:"img","aria-label":u},[s,r])};m.props={name:String,title:String};var g=t.defineComponent({name:"CarouselSlide",props:{index:{type:Number,default:1},isClone:{type:Boolean,default:!1}},setup(e,{slots:n}){const i=t.inject("config",t.reactive(Object.assign({},l))),a=t.inject("currentSlide",t.ref(0)),o=t.inject("slidesToScroll",t.ref(0)),r=t.inject("isSliding",t.ref(!1)),u=t.inject("isVertical",t.ref(!1)),s=t.inject("slideSize",t.ref(0)),c=t.computed((()=>e.index===a.value)),d=t.computed((()=>e.index===a.value-1)),v=t.computed((()=>e.index===a.value+1)),p=t.computed((()=>{const t=Math.floor(o.value),n=Math.ceil(o.value+i.itemsToShow-1);return e.index>=t&&e.index<=n})),f=t.computed((()=>{const e=i.gap?`${s.value}px`:100/i.itemsToShow+"%";return u.value?{height:e,width:""}:{width:e,height:""}}));return()=>{var a,l;return i.enabled?t.h("li",{style:f.value,class:{carousel__slide:!0,"carousel__slide--clone":e.isClone,"carousel__slide--visible":p.value,"carousel__slide--active":c.value,"carousel__slide--prev":d.value,"carousel__slide--next":v.value,"carousel__slide--sliding":r.value},"aria-hidden":!p.value},null===(l=n.default)||void 0===l?void 0:l.call(n,{isActive:c.value,isClone:e.isClone,isPrev:d.value,isNext:v.value,isSliding:r.value,isVisible:p.value})):null===(a=n.default)||void 0===a?void 0:a.call(n)}}});e.Carousel=p,e.Icon=m,e.Navigation=(e,{slots:n,attrs:i})=>{const{next:a,prev:o}=n||{},r=t.inject("config",t.reactive(Object.assign({},l))),u=t.inject("maxSlide",t.ref(1)),s=t.inject("minSlide",t.ref(1)),c=t.inject("normalizeDir",t.ref("ltr")),d=t.inject("currentSlide",t.ref(1)),v=t.inject("nav",{}),{wrapAround:p,i18n:f}=r;return[t.h("button",{type:"button",class:["carousel__prev",!p&&d.value<=s.value&&"carousel__prev--disabled",null==i?void 0:i.class],"aria-label":f.ariaPreviousSlide,title:f.ariaPreviousSlide,onClick:v.prev},(null==o?void 0:o())||t.h(m,{name:{ltr:"arrowLeft",rtl:"arrowRight",ttb:"arrowUp",btt:"arrowDown"}[c.value]})),t.h("button",{type:"button",class:["carousel__next",!p&&d.value>=u.value&&"carousel__next--disabled",null==i?void 0:i.class],"aria-label":f.ariaNextSlide,title:f.ariaNextSlide,onClick:v.next},(null==a?void 0:a())||t.h(m,{name:{ltr:"arrowRight",rtl:"arrowLeft",ttb:"arrowDown",btt:"arrowUp"}[c.value]}))]},e.Pagination=()=>{const e=t.inject("config",t.reactive(Object.assign({},l))),n=t.inject("maxSlide",t.ref(1)),i=t.inject("minSlide",t.ref(1)),a=t.inject("currentSlide",t.ref(1)),o=t.inject("nav",{}),r=e=>s({val:a.value,max:n.value,min:0})===e,u=[];for(let a=i.value;a<n.value+1;a++){const n=c(e.i18n.ariaNavigateToSlide,{slideNumber:a+1}),i=t.h("button",{type:"button",class:{"carousel__pagination-button":!0,"carousel__pagination-button--active":r(a)},"aria-label":n,title:n,onClick:()=>o.slideTo(a)}),l=t.h("li",{class:"carousel__pagination-item",key:a},i);u.push(l)}return t.h("ol",{class:"carousel__pagination"},u)},e.Slide=g}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueCarousel={},e.Vue)}(this,(function(e,t){"use strict";const n=["center","start","end","center-even","center-odd"],i=["viewport","carousel"],a=["ltr","left-to-right","rtl","right-to-left","ttb","top-to-bottom","btt","bottom-to-top"],l={enabled:!0,itemsToShow:1,itemsToScroll:1,modelValue:0,transition:300,autoplay:0,gap:0,height:"auto",wrapAround:!1,pauseAutoplayOnHover:!1,mouseDrag:!0,touchDrag:!0,snapAlign:n[0],dir:a[0],breakpointMode:i[0],breakpoints:void 0,i18n:{ariaNextSlide:"Navigate to next slide",ariaPreviousSlide:"Navigate to previous slide",ariaNavigateToSlide:"Navigate to slide {slideNumber}",ariaGallery:"Gallery",itemXofY:"Item {currentSlide} of {slidesCount}",iconArrowUp:"Arrow pointing upwards",iconArrowDown:"Arrow pointing downwards",iconArrowRight:"Arrow pointing to the right",iconArrowLeft:"Arrow pointing to the left"}},o={enabled:{default:l.enabled,type:Boolean},itemsToShow:{default:l.itemsToShow,type:Number},itemsToScroll:{default:l.itemsToScroll,type:Number},wrapAround:{default:l.wrapAround,type:Boolean},gap:{default:l.gap,type:Number},height:{default:l.height,type:[Number,String]},snapAlign:{default:l.snapAlign,validator:e=>n.includes(e)},transition:{default:l.transition,type:Number},breakpointMode:{default:l.breakpointMode,validator:e=>i.includes(e)},breakpoints:{default:l.breakpoints,type:Object},autoplay:{default:l.autoplay,type:Number},pauseAutoplayOnHover:{default:l.pauseAutoplayOnHover,type:Boolean},modelValue:{default:void 0,type:Number},mouseDrag:{default:l.mouseDrag,type:Boolean},touchDrag:{default:l.touchDrag,type:Boolean},dir:{default:l.dir,validator:e=>a.includes(e)},i18n:{default:l.i18n,type:Object}};function r({val:e,max:t,min:n}){return t<n?e:Math.min(Math.max(e,n),t)}function u(e){return e?e.reduce(((e,n)=>{var i;return n.type===t.Fragment?[...e,...u(n.children)]:"CarouselSlide"===(null===(i=n.type)||void 0===i?void 0:i.name)?[...e,n]:e}),[]):[]}function s({val:e,max:t,min:n=0}){const i=t-n+1;return((e-n)%i+i)%i+n}function c(e="",t={}){return Object.entries(t).reduce(((e,[t,n])=>e.replace(`{${t}}`,String(n))),e)}var d,v=t.defineComponent({name:"ARIA",setup(){const e=t.inject("config",t.reactive(Object.assign({},l))),n=t.inject("currentSlide",t.ref(0)),i=t.inject("slidesCount",t.ref(0));return()=>t.h("div",{class:["carousel__liveregion","carousel__sr-only"],"aria-live":"polite","aria-atomic":"true"},c(e.i18n.itemXofY,{currentSlide:n.value+1,slidesCount:i.value}))}}),p=t.defineComponent({name:"Carousel",props:o,emits:["init","drag","slide-start","loop","update:modelValue","slide-end","before-init"],setup(e,{slots:n,emit:i,expose:a}){var o;const c=t.ref(null),d=t.ref(null),p=t.ref([]),f=t.ref(0),m=t.ref(0),g=t.computed((()=>Object.assign(Object.assign(Object.assign({},l),e),{i18n:Object.assign(Object.assign({},l.i18n),e.i18n),breakpoints:void 0}))),h=t.reactive(Object.assign({},g.value)),b=t.ref(null!==(o=e.modelValue)&&void 0!==o?o:0),w=t.ref(0),S=t.ref(0),x=t.ref(0),y=t.ref(0);let j=null,A=null,_=null;const C=t.computed((()=>f.value+h.gap)),T=t.computed((()=>{const e=h.dir||"lrt";return{"left-to-right":"ltr","right-to-left":"rtl","top-to-bottom":"ttb","bottom-to-top":"btt"}[e]||e})),M=t.computed((()=>["ttb","btt"].includes(T.value)));function N(){var t;const n=("carousel"===h.breakpointMode?null===(t=c.value)||void 0===t?void 0:t.getBoundingClientRect().width:window.innerWidth)||0,i=Object.keys(e.breakpoints||{}).map((e=>Number(e))).sort(((e,t)=>+t-+e));let a=Object.assign({},g.value);i.some((t=>{var i;return n>=t&&(a=Object.assign(Object.assign({},a),null===(i=e.breakpoints)||void 0===i?void 0:i[t]),!0)})),Object.assign(h,a)}t.provide("config",h),t.provide("slidesCount",m),t.provide("currentSlide",b),t.provide("maxSlide",x),t.provide("minSlide",y),t.provide("slideSize",f),t.provide("isVertical",M),t.provide("normalizeDir",T);const O=function(e,t){let n;return function(...i){n&&clearTimeout(n),n=setTimeout((()=>{e(...i),n=null}),t)}}((()=>{N(),L(),k()}),16);function k(){if(!d.value)return;const e=d.value.getBoundingClientRect(),t=(h.itemsToShow-1)*h.gap;M.value?f.value=(e.height-t)/h.itemsToShow:f.value=(e.width-t)/h.itemsToShow}function L(){m.value<=0||(S.value=Math.ceil((m.value-1)/2),x.value=function({config:e,slidesCount:t}){var n;const{snapAlign:i="N/A",wrapAround:a,itemsToShow:l=1}=e;if(a)return Math.max(t-1,0);const o=null!==(n={start:Math.ceil(t-l),end:Math.ceil(t-1),center:t-Math.ceil((l-.5)/2),"center-odd":t-Math.ceil((l-.5)/2),"center-even":t-Math.ceil(l/2)}[i])&&void 0!==n?n:0;return Math.max(o,0)}({config:h,slidesCount:m.value}),y.value=function({config:e,slidesCount:t}){var n;const{snapAlign:i="N/A",wrapAround:a,itemsToShow:l=1}=e;return a||l>t?0:null!==(n={start:0,end:Math.floor(l-1),center:Math.floor((l-1)/2),"center-odd":Math.floor((l-1)/2),"center-even":Math.floor((l-2)/2)}[i])&&void 0!==n?n:0}({config:h,slidesCount:m.value}),h.wrapAround||(b.value=r({val:b.value,max:x.value,min:y.value})))}t.onMounted((()=>{t.nextTick((()=>k())),setTimeout((()=>k()),1e3),N(),Y(),window.addEventListener("resize",O,{passive:!0}),_=new ResizeObserver(O),c.value&&_.observe(c.value),i("init")})),t.onUnmounted((()=>{A&&clearTimeout(A),j&&clearInterval(j),_&&c.value&&(_.unobserve(c.value),_=null),window.removeEventListener("resize",O,{passive:!0})}));let D=!1;const I={x:0,y:0},z=t.reactive({x:0,y:0}),E=t.ref(!1),V=t.ref(!1),$=()=>{E.value=!0},R=()=>{E.value=!1};function B(e){const t=e.target.tagName;if(["INPUT","TEXTAREA","SELECT"].includes(t)||H.value)return;if(D="touchstart"===e.type,!D&&(e.preventDefault(),0!==e.button))return;I.x=D?e.touches[0].clientX:e.clientX,I.y=D?e.touches[0].clientY:e.clientY;const n=D?"touchmove":"mousemove",i=D?"touchend":"mouseup";document.addEventListener(n,U,{passive:!1}),document.addEventListener(i,X,{passive:!0})}const U=function(e){let t=!1;return function(...n){t||(t=!0,requestAnimationFrame((()=>{e.apply(this,n),t=!1})))}}((e=>{V.value=!0;const t=D?e.touches[0].clientX:e.clientX,n=D?e.touches[0].clientY:e.clientY,a=t-I.x,l=n-I.y;z.x=a,z.y=l,i("drag",{deltaX:a,deltaY:l})}));function X(){const e=M.value?"y":"x",t=["rtl","btt"].includes(T.value)?-1:1,n=.4*Math.sign(z[e]),i=Math.round(z[e]/C.value+n)*t;if(i&&!D){const e=t=>{t.preventDefault(),window.removeEventListener("click",e)};window.addEventListener("click",e)}G(b.value-i),z.x=0,z.y=0,V.value=!1;const a=D?"touchmove":"mousemove",l=D?"touchend":"mouseup";document.removeEventListener(a,U),document.removeEventListener(l,X)}function Y(){!h.autoplay||h.autoplay<=0||(j=setInterval((()=>{h.pauseAutoplayOnHover&&E.value||q()}),h.autoplay))}function P(){j&&(clearInterval(j),j=null),Y()}const H=t.ref(!1);function G(e){const t=h.wrapAround?e:r({val:e,max:x.value,min:y.value});b.value===t||H.value||(i("slide-start",{slidingToIndex:e,currentSlideIndex:b.value,prevSlideIndex:w.value,slidesCount:m.value}),H.value=!0,w.value=b.value,b.value=t,A=setTimeout((()=>{if(h.wrapAround){const n=s({val:t,max:x.value,min:0});n!==b.value&&(b.value=n,i("loop",{currentSlideIndex:b.value,slidingToIndex:e}))}i("update:modelValue",b.value),i("slide-end",{currentSlideIndex:b.value,prevSlideIndex:w.value,slidesCount:m.value}),H.value=!1,P()}),h.transition))}function q(){G(b.value+h.itemsToScroll)}function F(){G(b.value-h.itemsToScroll)}const W={slideTo:G,next:q,prev:F};function J(){N(),L(),k(),P()}t.provide("nav",W),t.provide("isSliding",H),t.watch((()=>Object.assign({},e)),J,{deep:!0}),t.watch((()=>e.modelValue),(e=>{e!==b.value&&G(Number(e))})),t.watch(m,L),i("before-init");const K={config:h,slidesCount:m,slideSize:f,currentSlide:b,maxSlide:x,minSlide:y,middleSlide:S};a({updateBreakpointsConfig:N,updateSlidesData:L,updateSlideSize:k,restartCarousel:J,slideTo:G,next:q,prev:F,nav:W,data:K});const Q=t.computed((()=>{const e=function({config:e,currentSlide:t,slidesCount:n}){const{snapAlign:i="N/A",wrapAround:a,itemsToShow:l=1}=e,o=((e,t)=>{var n;return null!==(n={start:0,center:(t-1)/2,"center-odd":(t-1)/2,"center-even":(t-2)/2,end:t-1}[e])&&void 0!==n?n:0})(i,l);return a?t-o:r({val:t-o,max:n-l,min:0})}({config:h,currentSlide:b.value,slidesCount:m.value}),t=h.wrapAround?m.value:0,n=["rtl","btt"].includes(T.value)?-1:1,i=(e+t)*C.value*n,a=M.value?z.y:z.x;return`translate${M.value?"Y":"X"}(${a-i}px)`})),Z=n.default||n.slides,ee=n.addons,te=t.reactive(K);return()=>{if(!h.enabled)return t.h("section",{ref:c,class:["carousel","is-disabled"]},null==Z?void 0:Z());const e=u(null==Z?void 0:Z(te)),n=(null==ee?void 0:ee(te))||[];e.forEach(((e,t)=>{e.props?e.props.index=t:e.props={index:t}}));let i=e;if(h.wrapAround){const n=e.map(((n,i)=>t.cloneVNode(n,{index:-e.length+i,isClone:!0,key:`clone-before-${i}`}))),a=e.map(((n,i)=>t.cloneVNode(n,{index:e.length+i,isClone:!0,key:`clone-after-${i}`})));i=[...n,...e,...a]}p.value=e,m.value=Math.max(e.length,1);const a=t.h("ol",{class:"carousel__track",style:{transform:Q.value,transition:`${H.value?h.transition:0}ms`,gap:`${h.gap}px`},onMousedownCapture:h.mouseDrag?B:null,onTouchstartPassiveCapture:h.touchDrag?B:null},i),l=t.h("div",{class:"carousel__viewport",ref:d},a);return t.h("section",{ref:c,class:["carousel",`is-${T.value}`,{"is-vertical":M.value,"is-sliding":H.value,"is-dragging":V.value,"is-hover":E.value}],style:{"--vc-trk-height":`${"number"==typeof h.height?`${h.height}px`:h.height}`},dir:T.value,"aria-label":h.i18n.ariaGallery,tabindex:"0",onMouseenter:$,onMouseleave:R},[l,n,t.h(v)])}}});!function(e){e.arrowUp="arrowUp",e.arrowDown="arrowDown",e.arrowRight="arrowRight",e.arrowLeft="arrowLeft"}(d||(d={}));const f={arrowUp:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z",arrowDown:"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z",arrowRight:"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z",arrowLeft:"M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"};const m=e=>{const n=t.inject("config",t.reactive(Object.assign({},l))),i=String(e.name),a=`icon${i.charAt(0).toUpperCase()+i.slice(1)}`;if(!i||"string"!=typeof i||!(i in d))return;const o=f[i],r=t.h("path",{d:o}),u=n.i18n[a]||e.title||i,s=t.h("title",u);return t.h("svg",{class:"carousel__icon",viewBox:"0 0 24 24",role:"img","aria-label":u},[s,r])};m.props={name:String,title:String};var g=t.defineComponent({name:"CarouselSlide",props:{index:{type:Number,default:1},isClone:{type:Boolean,default:!1}},setup(e,{slots:n}){const i=t.inject("config",t.reactive(Object.assign({},l))),a=t.inject("currentSlide",t.ref(0)),o=t.inject("slidesToScroll",t.ref(0)),r=t.inject("isSliding",t.ref(!1)),u=t.inject("isVertical",t.ref(!1)),s=t.inject("slideSize",t.ref(0)),c=t.computed((()=>e.index===a.value)),d=t.computed((()=>e.index===a.value-1)),v=t.computed((()=>e.index===a.value+1)),p=t.computed((()=>{const t=Math.floor(o.value),n=Math.ceil(o.value+i.itemsToShow-1);return e.index>=t&&e.index<=n})),f=t.computed((()=>{const e=i.gap?`${s.value}px`:100/i.itemsToShow+"%";return u.value?{height:e,width:""}:{width:e,height:""}}));return()=>{var a,l;return i.enabled?t.h("li",{style:f.value,class:{carousel__slide:!0,"carousel__slide--clone":e.isClone,"carousel__slide--visible":p.value,"carousel__slide--active":c.value,"carousel__slide--prev":d.value,"carousel__slide--next":v.value,"carousel__slide--sliding":r.value},"aria-hidden":!p.value},null===(l=n.default)||void 0===l?void 0:l.call(n,{isActive:c.value,isClone:e.isClone,isPrev:d.value,isNext:v.value,isSliding:r.value,isVisible:p.value})):null===(a=n.default)||void 0===a?void 0:a.call(n)}}});e.Carousel=p,e.Icon=m,e.Navigation=(e,{slots:n,attrs:i})=>{const{next:a,prev:o}=n||{},r=t.inject("config",t.reactive(Object.assign({},l))),u=t.inject("maxSlide",t.ref(1)),s=t.inject("minSlide",t.ref(1)),c=t.inject("normalizeDir",t.ref("ltr")),d=t.inject("currentSlide",t.ref(1)),v=t.inject("nav",{}),{wrapAround:p,i18n:f}=r;return[t.h("button",{type:"button",class:["carousel__prev",!p&&d.value<=s.value&&"carousel__prev--disabled",null==i?void 0:i.class],"aria-label":f.ariaPreviousSlide,title:f.ariaPreviousSlide,onClick:v.prev},(null==o?void 0:o())||t.h(m,{name:{ltr:"arrowLeft",rtl:"arrowRight",ttb:"arrowUp",btt:"arrowDown"}[c.value]})),t.h("button",{type:"button",class:["carousel__next",!p&&d.value>=u.value&&"carousel__next--disabled",null==i?void 0:i.class],"aria-label":f.ariaNextSlide,title:f.ariaNextSlide,onClick:v.next},(null==a?void 0:a())||t.h(m,{name:{ltr:"arrowRight",rtl:"arrowLeft",ttb:"arrowDown",btt:"arrowUp"}[c.value]}))]},e.Pagination=()=>{const e=t.inject("config",t.reactive(Object.assign({},l))),n=t.inject("maxSlide",t.ref(1)),i=t.inject("minSlide",t.ref(1)),a=t.inject("currentSlide",t.ref(1)),o=t.inject("nav",{}),r=e=>s({val:a.value,max:n.value,min:0})===e,u=[];for(let a=i.value;a<n.value+1;a++){const n=c(e.i18n.ariaNavigateToSlide,{slideNumber:a+1}),i=t.h("button",{type:"button",class:{"carousel__pagination-button":!0,"carousel__pagination-button--active":r(a)},"aria-label":n,title:n,onClick:()=>o.slideTo(a)}),l=t.h("li",{class:"carousel__pagination-item",key:a},i);u.push(l)}return t.h("ol",{class:"carousel__pagination"},u)},e.Slide=g}));

package.json

 {
   "name": "vue3-carousel",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "type": "module",
@@ -5,0 +5,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

290131

increased by0.55%

Lines of code

2476

increased by1.85%

No dependency changes