Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue3-carousel
Advanced tools
vue3-carousel - npm Package Compare versions
Comparing version 0.5.1 to 0.6.0
@@ -5,2 +5,12 @@ # Changelog | ||
| ## [0.4.0](https://github.com/ismail9k/vue3-carousel/releases/tag/v0.4.0) - 2024-11-06 | ||
| - Test: use vitest instead of jest in #418 | ||
| - Feat add title attribute for pagination and navigation buttons in #419 | ||
| ## [0.5.0](https://github.com/ismail9k/vue3-carousel/releases/tag/v0.4.0) - 2024-10-23 | ||
| - Feat: Support Ability to Breakpoints Relative to The Carousel Width by @tarwin, @ismail9k in #408 | ||
| - Fix infinite recursion in mapNumberToRange by @Tofandel in #415 | ||
| ## [0.4.0](https://github.com/ismail9k/vue3-carousel/releases/tag/v0.4.0) - 2024-10-23 | ||
@@ -7,0 +17,0 @@ |
@@ -37,3 +37,3 @@ import * as vue from 'vue'; | ||
| transition?: number | ||
| throttle: number | ||
| gap: number | ||
| autoplay?: number | ||
@@ -64,3 +64,3 @@ snapAlign: SnapAlign | ||
| transition?: number | undefined; | ||
| throttle: number; | ||
| gap: number; | ||
| autoplay?: number | undefined; | ||
@@ -83,3 +83,3 @@ snapAlign: SnapAlign; | ||
| transition?: number | undefined; | ||
| throttle: number; | ||
| gap: number; | ||
| autoplay?: number | undefined; | ||
@@ -101,3 +101,3 @@ snapAlign: SnapAlign; | ||
| transition: number; | ||
| throttle: number; | ||
| gap: number; | ||
| autoplay: number; | ||
@@ -104,0 +104,0 @@ wrapAround: boolean; |
| /** | ||
| * Vue 3 Carousel 0.5.1 | ||
| * Vue 3 Carousel 0.6.0 | ||
| * (c) 2024 | ||
@@ -28,3 +28,3 @@ * @license MIT | ||
| autoplay: 0, | ||
| throttle: 16, | ||
| gap: 0, | ||
| wrapAround: false, | ||
@@ -57,5 +57,5 @@ pauseAutoplayOnHover: false, | ||
| }, | ||
| // control max drag | ||
| throttle: { | ||
| default: DEFAULT_CONFIG.throttle, | ||
| // control the gap between slides | ||
| gap: { | ||
| default: DEFAULT_CONFIG.gap, | ||
| type: Number, | ||
@@ -127,54 +127,52 @@ }, | ||
| /** | ||
| * Determines the maximum slide index based on the configuration. | ||
| * | ||
| * @param {Args} args - The carousel configuration and slide count. | ||
| * @returns {number} The maximum slide index. | ||
| */ | ||
| function getMaxSlideIndex({ config, slidesCount }) { | ||
| const { snapAlign, wrapAround, itemsToShow = 1 } = config; | ||
| var _a; | ||
| const { snapAlign = 'N/A', wrapAround, itemsToShow = 1 } = config; | ||
| // If wrapAround is enabled, the max index is the last slide | ||
| if (wrapAround) { | ||
| return Math.max(slidesCount - 1, 0); | ||
| } | ||
| let output; | ||
| switch (snapAlign) { | ||
| case 'start': | ||
| output = slidesCount - itemsToShow; | ||
| break; | ||
| case 'end': | ||
| output = slidesCount - 1; | ||
| break; | ||
| case 'center': | ||
| case 'center-odd': | ||
| output = slidesCount - Math.ceil((itemsToShow - 0.5) / 2); | ||
| break; | ||
| case 'center-even': | ||
| output = slidesCount - Math.ceil(itemsToShow / 2); | ||
| break; | ||
| default: | ||
| output = 0; | ||
| break; | ||
| } | ||
| return Math.max(output, 0); | ||
| // Map snapAlign values to calculation logic | ||
| const snapAlignCalculations = { | ||
| start: Math.ceil(slidesCount - itemsToShow), | ||
| end: Math.ceil(slidesCount - 1), | ||
| center: slidesCount - Math.ceil((itemsToShow - 0.5) / 2), | ||
| 'center-odd': slidesCount - Math.ceil((itemsToShow - 0.5) / 2), | ||
| 'center-even': slidesCount - Math.ceil(itemsToShow / 2), | ||
| }; | ||
| // Compute the max index based on snapAlign, or default to 0 | ||
| const calculateMaxIndex = (_a = snapAlignCalculations[snapAlign]) !== null && _a !== void 0 ? _a : 0; | ||
| // Return the result ensuring it's non-negative | ||
| return Math.max(calculateMaxIndex, 0); | ||
| } | ||
| /** | ||
| * Determines the minimum slide index based on the configuration. | ||
| * | ||
| * @param {Args} args - The carousel configuration and slide count. | ||
| * @returns {number} The minimum slide index. | ||
| */ | ||
| function getMinSlideIndex({ config, slidesCount }) { | ||
| const { wrapAround, snapAlign, itemsToShow = 1 } = config; | ||
| let output = 0; | ||
| var _a; | ||
| const { snapAlign = 'N/A', wrapAround, itemsToShow = 1 } = config; | ||
| // If wrapAround is enabled or itemsToShow exceeds slidesCount, the minimum index is always 0 | ||
| if (wrapAround || itemsToShow > slidesCount) { | ||
| return output; | ||
| return 0; | ||
| } | ||
| switch (snapAlign) { | ||
| case 'start': | ||
| output = 0; | ||
| break; | ||
| case 'end': | ||
| output = itemsToShow - 1; | ||
| break; | ||
| case 'center': | ||
| case 'center-odd': | ||
| output = Math.floor((itemsToShow - 1) / 2); | ||
| break; | ||
| case 'center-even': | ||
| output = Math.floor((itemsToShow - 2) / 2); | ||
| break; | ||
| default: | ||
| output = 0; | ||
| break; | ||
| } | ||
| return output; | ||
| // Map of snapAlign to offset calculations | ||
| const snapAlignCalculations = { | ||
| start: 0, | ||
| end: Math.floor(itemsToShow - 1), | ||
| center: Math.floor((itemsToShow - 1) / 2), | ||
| 'center-odd': Math.floor((itemsToShow - 1) / 2), | ||
| 'center-even': Math.floor((itemsToShow - 2) / 2), | ||
| }; | ||
| // Return the calculated offset or default to 0 for invalid snapAlign values | ||
| return (_a = snapAlignCalculations[snapAlign]) !== null && _a !== void 0 ? _a : 0; | ||
| } | ||
@@ -189,25 +187,26 @@ | ||
| function getSlidesToScroll({ config, currentSlide, slidesCount }) { | ||
| const { snapAlign, wrapAround, itemsToShow = 1 } = config; | ||
| let output = currentSlide; | ||
| switch (snapAlign) { | ||
| case 'center': | ||
| case 'center-odd': | ||
| output -= (itemsToShow - 1) / 2; | ||
| break; | ||
| case 'center-even': | ||
| output -= (itemsToShow - 2) / 2; | ||
| break; | ||
| case 'end': | ||
| output -= itemsToShow - 1; | ||
| break; | ||
| const calculateOffset = (snapAlign, itemsToShow) => { | ||
| var _a; | ||
| const offsetMap = { | ||
| start: 0, | ||
| center: (itemsToShow - 1) / 2, | ||
| 'center-odd': (itemsToShow - 1) / 2, | ||
| 'center-even': (itemsToShow - 2) / 2, | ||
| end: itemsToShow - 1, | ||
| }; | ||
| return (_a = offsetMap[snapAlign]) !== null && _a !== void 0 ? _a : 0; // Fallback to 0 for unknown snapAlign | ||
| }; | ||
| function getScrolledIndex({ config, currentSlide, slidesCount }) { | ||
| const { snapAlign = 'N/A', wrapAround, itemsToShow = 1 } = config; | ||
| // Calculate the offset based on snapAlign | ||
| const offset = calculateOffset(snapAlign, itemsToShow); | ||
| // Compute the index with or without wrapAround | ||
| if (!wrapAround) { | ||
| return getNumberInRange({ | ||
| val: currentSlide - offset, | ||
| max: slidesCount - itemsToShow, | ||
| min: 0, | ||
| }); | ||
| } | ||
| if (wrapAround) { | ||
| return output; | ||
| } | ||
| return getNumberInRange({ | ||
| val: output, | ||
| max: slidesCount - itemsToShow, | ||
| min: 0, | ||
| }); | ||
| return currentSlide - offset; | ||
| } | ||
@@ -241,13 +240,11 @@ | ||
| // eslint-disable-next-line no-unused-vars | ||
| function throttle(fn, limit) { | ||
| let inThrottle; | ||
| if (!limit) { | ||
| return fn; | ||
| } | ||
| function throttle(fn) { | ||
| let isRunning = false; | ||
| return function (...args) { | ||
| const self = this; | ||
| if (!inThrottle) { | ||
| fn.apply(self, args); | ||
| inThrottle = true; | ||
| setTimeout(() => (inThrottle = false), limit); | ||
| if (!isRunning) { | ||
| isRunning = true; | ||
| requestAnimationFrame(() => { | ||
| fn.apply(this, args); | ||
| isRunning = false; | ||
| }); | ||
| } | ||
@@ -318,2 +315,3 @@ }; | ||
| let resizeObserver = null; | ||
| const effectiveSlideWidth = computed(() => slideWidth.value + config.gap); | ||
| provide('config', config); | ||
@@ -359,3 +357,6 @@ provide('slidesCount', slidesCount); | ||
| const rect = root.value.getBoundingClientRect(); | ||
| slideWidth.value = rect.width / config.itemsToShow; | ||
| // Calculate the total gap space | ||
| const totalGap = (config.itemsToShow - 1) * config.gap; | ||
| // Adjust the slide width to account for the gap | ||
| slideWidth.value = (rect.width - totalGap) / config.itemsToShow; | ||
| } | ||
@@ -443,7 +444,7 @@ function updateSlidesData() { | ||
| dragged.x = deltaX; | ||
| }, config.throttle); | ||
| }); | ||
| function handleDragEnd() { | ||
| const direction = config.dir === 'rtl' ? -1 : 1; | ||
| const tolerance = Math.sign(dragged.x) * 0.4; | ||
| const draggedSlides = Math.round(dragged.x / slideWidth.value + tolerance) * direction; | ||
| const draggedSlides = Math.round(dragged.x / effectiveSlideWidth.value + tolerance) * direction; | ||
| // Prevent clicking if there is clicked slides | ||
@@ -546,18 +547,22 @@ if (draggedSlides && !isTouch) { | ||
| */ | ||
| const slidesToScroll = computed(() => getSlidesToScroll({ | ||
| config, | ||
| currentSlide: currentSlideIndex.value, | ||
| slidesCount: slidesCount.value, | ||
| })); | ||
| provide('slidesToScroll', slidesToScroll); | ||
| const trackStyle = computed(() => { | ||
| const xScroll = computed(() => { | ||
| const direction = config.dir === 'rtl' ? -1 : 1; | ||
| const xScroll = slidesToScroll.value * slideWidth.value * direction; | ||
| return { | ||
| transform: `translateX(${dragged.x - xScroll}px)`, | ||
| transition: `${isSliding.value ? config.transition : 0}ms`, | ||
| margin: config.wrapAround ? `0 -${slidesCount.value * slideWidth.value}px` : '', | ||
| width: `100%`, | ||
| }; | ||
| const scrolledIndex = getScrolledIndex({ | ||
| config, | ||
| currentSlide: currentSlideIndex.value, | ||
| slidesCount: slidesCount.value, | ||
| }); | ||
| // Calculate the total scroll offset | ||
| const totalOffset = scrolledIndex * effectiveSlideWidth.value; | ||
| return totalOffset * direction; | ||
| }); | ||
| const trackStyle = computed(() => ({ | ||
| transform: `translateX(${dragged.x - xScroll.value}px)`, | ||
| transition: `${isSliding.value ? config.transition : 0}ms`, | ||
| margin: config.wrapAround | ||
| ? `0 -${slidesCount.value * effectiveSlideWidth.value}px` | ||
| : '', | ||
| width: `100%`, | ||
| gap: `${config.gap}px`, | ||
| })); | ||
| function restartCarousel() { | ||
@@ -778,2 +783,3 @@ updateBreakpointsConfig(); | ||
| const isSliding = inject('isSliding', ref(false)); | ||
| const slideWidth = inject('slideWidth', ref(0)); | ||
| const isActive = computed(() => props.index === currentSlide.value); | ||
@@ -787,6 +793,12 @@ const isPrev = computed(() => props.index === currentSlide.value - 1); | ||
| }); | ||
| const widthStyle = computed(() => { | ||
| if (config.gap) { | ||
| return `${slideWidth.value}px`; | ||
| } | ||
| return `${100 / config.itemsToShow}%`; | ||
| }); | ||
| return () => { | ||
| var _a; | ||
| return h('li', { | ||
| style: { width: `${100 / config.itemsToShow}%` }, | ||
| style: { width: widthStyle.value }, | ||
| class: { | ||
@@ -793,0 +805,0 @@ carousel__slide: true, |
| /** | ||
| * Vue 3 Carousel 0.5.1 | ||
| * Vue 3 Carousel 0.6.0 | ||
| * (c) 2024 | ||
| * @license MIT | ||
| */ | ||
| import{Fragment as e,defineComponent as t,inject as a,reactive as n,ref as l,h as i,computed as o,provide as r,onMounted as u,nextTick as s,onUnmounted as c,watch as d,cloneVNode as v}from"vue";const p=["center","start","end","center-even","center-odd"],m=["viewport","carousel"],g=["ltr","rtl"],f={itemsToShow:1,itemsToScroll:1,modelValue:0,transition:300,autoplay:0,throttle:16,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"}},b={itemsToShow:{default:f.itemsToShow,type:Number},itemsToScroll:{default:f.itemsToScroll,type:Number},wrapAround:{default:f.wrapAround,type:Boolean},throttle:{default:f.throttle,type:Number},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 w({val:e,max:t,min:a}){return t<a?e:Math.min(Math.max(e,a),t)}function h(t){return t?t.reduce(((t,a)=>{var n;return a.type===e?[...t,...h(a.children)]:"CarouselSlide"===(null===(n=a.type)||void 0===n?void 0:n.name)?[...t,a]:t}),[]):[]}function x({val:e,max:t,min:a=0}){const n=t-a+1;return((e-a)%n+n)%n+a}function S(e="",t={}){return Object.entries(t).reduce(((e,[t,a])=>e.replace(`{${t}}`,String(a))),e)}var y,_=t({name:"ARIA",setup(){const e=a("config",n(Object.assign({},f))),t=a("currentSlide",l(0)),o=a("slidesCount",l(0));return()=>i("div",{class:["carousel__liveregion","carousel__sr-only"],"aria-live":"polite","aria-atomic":"true"},S(e.i18n.itemXofY,{currentSlide:t.value+1,slidesCount:o.value}))}}),A=t({name:"Carousel",props:b,setup(e,{slots:t,emit:a,expose:p}){var m;const g=l(null),S=l([]),y=l(0),A=l(0),T=o((()=>Object.assign(Object.assign(Object.assign({},f),e),{i18n:Object.assign(Object.assign({},f.i18n),e.i18n),breakpoints:void 0}))),C=n(Object.assign({},T.value)),k=l(null!==(m=e.modelValue)&&void 0!==m?m:0),M=l(0),O=l(0),L=l(0),N=l(0);let j=null,D=null,E=null;function I(){var t;if(!e.breakpoints)return;const a=("carousel"===C.breakpointMode?null===(t=g.value)||void 0===t?void 0:t.getBoundingClientRect().width:window.innerWidth)||0,n=Object.keys(e.breakpoints||{}).map((e=>Number(e))).sort(((e,t)=>+t-+e));let l=Object.assign({},T.value);n.some((t=>{var n;return a>=t&&(l=Object.assign(Object.assign({},l),null===(n=e.breakpoints)||void 0===n?void 0:n[t]),!0)})),Object.assign(C,l)}r("config",C),r("slidesCount",A),r("currentSlide",k),r("maxSlide",L),r("minSlide",N),r("slideWidth",y);const R=function(e,t){let a;return function(...n){a&&clearTimeout(a),a=setTimeout((()=>{e(...n),a=null}),t)}}((()=>{I(),X(),B()}),16);function B(){if(!g.value)return;const e=g.value.getBoundingClientRect();y.value=e.width/C.itemsToShow}function X(){A.value<=0||(O.value=Math.ceil((A.value-1)/2),L.value=function({config:e,slidesCount:t}){const{snapAlign:a,wrapAround:n,itemsToShow:l=1}=e;if(n)return Math.max(t-1,0);let i;switch(a){case"start":i=t-l;break;case"end":i=t-1;break;case"center":case"center-odd":i=t-Math.ceil((l-.5)/2);break;case"center-even":i=t-Math.ceil(l/2);break;default:i=0}return Math.max(i,0)}({config:C,slidesCount:A.value}),N.value=function({config:e,slidesCount:t}){const{wrapAround:a,snapAlign:n,itemsToShow:l=1}=e;let i=0;if(a||l>t)return i;switch(n){case"start":default:i=0;break;case"end":i=l-1;break;case"center":case"center-odd":i=Math.floor((l-1)/2);break;case"center-even":i=Math.floor((l-2)/2)}return i}({config:C,slidesCount:A.value}),C.wrapAround||(k.value=w({val:k.value,max:L.value,min:N.value})))}u((()=>{s((()=>B())),setTimeout((()=>B()),1e3),I(),J(),window.addEventListener("resize",R,{passive:!0}),E=new ResizeObserver(R),g.value&&E.observe(g.value),a("init")})),c((()=>{D&&clearTimeout(D),j&&clearInterval(j),E&&g.value&&(E.unobserve(g.value),E=null),window.removeEventListener("resize",R,{passive:!0})}));let z=!1;const V={x:0,y:0},$={x:0,y:0},P=n({x:0,y:0}),U=l(!1),Y=l(!1),H=()=>{U.value=!0},W=()=>{U.value=!1};function G(e){["INPUT","TEXTAREA","SELECT"].includes(e.target.tagName)||(z="touchstart"===e.type,z||e.preventDefault(),!z&&0!==e.button||Q.value||(V.x=z?e.touches[0].clientX:e.clientX,V.y=z?e.touches[0].clientY:e.clientY,document.addEventListener(z?"touchmove":"mousemove",q),document.addEventListener(z?"touchend":"mouseup",F)))}const q=function(e,t){let a;return t?function(...n){const l=this;a||(e.apply(l,n),a=!0,setTimeout((()=>a=!1),t))}:e}((e=>{Y.value=!0,$.x=z?e.touches[0].clientX:e.clientX,$.y=z?e.touches[0].clientY:e.clientY;const t=$.x-V.x,a=$.y-V.y;P.y=a,P.x=t}),C.throttle);function F(){const e="rtl"===C.dir?-1:1,t=.4*Math.sign(P.x),a=Math.round(P.x/y.value+t)*e;if(a&&!z){const e=t=>{t.preventDefault(),window.removeEventListener("click",e)};window.addEventListener("click",e)}Z(k.value-a),P.x=0,P.y=0,Y.value=!1,document.removeEventListener(z?"touchmove":"mousemove",q),document.removeEventListener(z?"touchend":"mouseup",F)}function J(){!C.autoplay||C.autoplay<=0||(j=setInterval((()=>{C.pauseAutoplayOnHover&&U.value||ee()}),C.autoplay))}function K(){j&&(clearInterval(j),j=null),J()}const Q=l(!1);function Z(e){const t=C.wrapAround?e:w({val:e,max:L.value,min:N.value});k.value===t||Q.value||(a("slide-start",{slidingToIndex:e,currentSlideIndex:k.value,prevSlideIndex:M.value,slidesCount:A.value}),Q.value=!0,M.value=k.value,k.value=t,D=setTimeout((()=>{if(C.wrapAround){const n=x({val:t,max:L.value,min:0});n!==k.value&&(k.value=n,a("loop",{currentSlideIndex:k.value,slidingToIndex:e}))}a("update:modelValue",k.value),a("slide-end",{currentSlideIndex:k.value,prevSlideIndex:M.value,slidesCount:A.value}),Q.value=!1,K()}),C.transition))}function ee(){Z(k.value+C.itemsToScroll)}function te(){Z(k.value-C.itemsToScroll)}const ae={slideTo:Z,next:ee,prev:te};r("nav",ae),r("isSliding",Q);const ne=o((()=>function({config:e,currentSlide:t,slidesCount:a}){const{snapAlign:n,wrapAround:l,itemsToShow:i=1}=e;let o=t;switch(n){case"center":case"center-odd":o-=(i-1)/2;break;case"center-even":o-=(i-2)/2;break;case"end":o-=i-1}return l?o:w({val:o,max:a-i,min:0})}({config:C,currentSlide:k.value,slidesCount:A.value})));r("slidesToScroll",ne);const le=o((()=>{const e="rtl"===C.dir?-1:1,t=ne.value*y.value*e;return{transform:`translateX(${P.x-t}px)`,transition:`${Q.value?C.transition:0}ms`,margin:C.wrapAround?`0 -${A.value*y.value}px`:"",width:"100%"}}));function ie(){I(),X(),B(),K()}Object.keys(b).forEach((t=>{["modelValue"].includes(t)||d((()=>e[t]),ie)})),d((()=>e.modelValue),(e=>{e!==k.value&&Z(Number(e))})),d(A,X),a("before-init");const oe={config:C,slidesCount:A,slideWidth:y,next:ee,prev:te,slideTo:Z,currentSlide:k,maxSlide:L,minSlide:N,middleSlide:O};p({updateBreakpointsConfig:I,updateSlidesData:X,updateSlideWidth:B,restartCarousel:ie,slideTo:Z,next:ee,prev:te,nav:ae,data:oe});const re=t.default||t.slides,ue=t.addons,se=n(oe);return()=>{const e=h(null==re?void 0:re(se)),t=(null==ue?void 0:ue(se))||[];e.forEach(((e,t)=>e.props.index=t));let a=e;if(C.wrapAround){const t=e.map(((t,a)=>v(t,{index:-e.length+a,isClone:!0,key:`clone-before-${a}`}))),n=e.map(((t,a)=>v(t,{index:e.length+a,isClone:!0,key:`clone-after-${a}`})));a=[...t,...e,...n]}S.value=e,A.value=Math.max(e.length,1);const n=i("ol",{class:"carousel__track",style:le.value,onMousedownCapture:C.mouseDrag?G:null,onTouchstartPassiveCapture:C.touchDrag?G:null},a),l=i("div",{class:"carousel__viewport"},n);return i("section",{ref:g,class:{carousel:!0,"is-sliding":Q.value,"is-dragging":Y.value,"is-hover":U.value,"carousel--rtl":"rtl"===C.dir},dir:C.dir,"aria-label":C.i18n.ariaGallery,tabindex:"0",onMouseenter:H,onMouseleave:W},[l,t,i(_)])}}});!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=a("config",n(Object.assign({},f))),l=String(e.name),o=`icon${l.charAt(0).toUpperCase()+l.slice(1)}`;if(!l||"string"!=typeof l||!(l in y))return;const r=i("path",{d:T[l]}),u=t.i18n[o]||e.title||l,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 k=(e,{slots:t,attrs:o})=>{const{next:r,prev:u}=t||{},s=a("config",n(Object.assign({},f))),c=a("maxSlide",l(1)),d=a("minSlide",l(1)),v=a("currentSlide",l(1)),p=a("nav",{}),{dir:m,wrapAround:g,i18n:b}=s,w="rtl"===m;return[i("button",{type:"button",class:["carousel__prev",!g&&v.value<=d.value&&"carousel__prev--disabled",null==o?void 0:o.class],"aria-label":b.ariaPreviousSlide,title:b.ariaPreviousSlide,onClick:p.prev},(null==u?void 0:u())||i(C,{name:w?"arrowRight":"arrowLeft"})),i("button",{type:"button",class:["carousel__next",!g&&v.value>=c.value&&"carousel__next--disabled",null==o?void 0:o.class],"aria-label":b.ariaNextSlide,title:b.ariaNextSlide,onClick:p.next},(null==r?void 0:r())||i(C,{name:w?"arrowLeft":"arrowRight"}))]},M=()=>{const e=a("config",n(Object.assign({},f))),t=a("maxSlide",l(1)),o=a("minSlide",l(1)),r=a("currentSlide",l(1)),u=a("nav",{}),s=e=>x({val:r.value,max:t.value,min:0})===e,c=[];for(let a=o.value;a<t.value+1;a++){const t=S(e.i18n.ariaNavigateToSlide,{slideNumber:a+1}),n=i("button",{type:"button",class:{"carousel__pagination-button":!0,"carousel__pagination-button--active":s(a)},"aria-label":t,title:t,onClick:()=>u.slideTo(a)}),l=i("li",{class:"carousel__pagination-item",key:a},n);c.push(l)}return i("ol",{class:"carousel__pagination"},c)};var O=t({name:"CarouselSlide",props:{index:{type:Number,default:1},isClone:{type:Boolean,default:!1}},setup(e,{slots:t}){const r=a("config",n(Object.assign({},f))),u=a("currentSlide",l(0)),s=a("slidesToScroll",l(0)),c=a("isSliding",l(!1)),d=o((()=>e.index===u.value)),v=o((()=>e.index===u.value-1)),p=o((()=>e.index===u.value+1)),m=o((()=>{const t=Math.floor(s.value),a=Math.ceil(s.value+r.itemsToShow-1);return e.index>=t&&e.index<=a}));return()=>{var a;return i("li",{style:{width:100/r.itemsToShow+"%"},class:{carousel__slide:!0,"carousel__slide--clone":e.isClone,"carousel__slide--visible":m.value,"carousel__slide--active":d.value,"carousel__slide--prev":v.value,"carousel__slide--next":p.value,"carousel__slide--sliding":c.value},"aria-hidden":!m.value},null===(a=t.default)||void 0===a?void 0:a.call(t,{isActive:d.value,isClone:e.isClone,isPrev:v.value,isNext:p.value,isSliding:c.value,isVisible:m.value}))}}});export{A as Carousel,C as Icon,k as Navigation,M as Pagination,O as Slide}; | ||
| import{Fragment as e,defineComponent as t,inject as n,reactive as a,ref as l,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","rtl"],f={itemsToShow:1,itemsToScroll:1,modelValue:0,transition:300,autoplay:0,gap:0,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={itemsToShow:{default:f.itemsToShow,type:Number},itemsToScroll:{default:f.itemsToScroll,type:Number},wrapAround:{default:f.wrapAround,type:Boolean},gap:{default:f.gap,type:Number},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 w({val:e,max:t,min:n}){return t<n?e:Math.min(Math.max(e,n),t)}function b(t){return t?t.reduce(((t,n)=>{var a;return n.type===e?[...t,...b(n.children)]:"CarouselSlide"===(null===(a=n.type)||void 0===a?void 0:a.name)?[...t,n]:t}),[]):[]}function x({val:e,max:t,min:n=0}){const a=t-n+1;return((e-n)%a+a)%a+n}function S(e="",t={}){return Object.entries(t).reduce(((e,[t,n])=>e.replace(`{${t}}`,String(n))),e)}var y,A=t({name:"ARIA",setup(){const e=n("config",a(Object.assign({},f))),t=n("currentSlide",l(0)),o=n("slidesCount",l(0));return()=>i("div",{class:["carousel__liveregion","carousel__sr-only"],"aria-live":"polite","aria-atomic":"true"},S(e.i18n.itemXofY,{currentSlide:t.value+1,slidesCount:o.value}))}}),_=t({name:"Carousel",props:h,setup(e,{slots:t,emit:n,expose:p}){var m;const g=l(null),S=l([]),y=l(0),_=l(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=l(null!==(m=e.modelValue)&&void 0!==m?m:0),N=l(0),O=l(0),k=l(0),L=l(0);let j=null,D=null,E=null;const I=o((()=>y.value+C.gap));function R(){var t;if(!e.breakpoints)return;const n=("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 l=Object.assign({},T.value);a.some((t=>{var a;return n>=t&&(l=Object.assign(Object.assign({},l),null===(a=e.breakpoints)||void 0===a?void 0:a[t]),!0)})),Object.assign(C,l)}r("config",C),r("slidesCount",_),r("currentSlide",M),r("maxSlide",k),r("minSlide",L),r("slideWidth",y);const B=function(e,t){let n;return function(...a){n&&clearTimeout(n),n=setTimeout((()=>{e(...a),n=null}),t)}}((()=>{R(),X(),$()}),16);function $(){if(!g.value)return;const e=g.value.getBoundingClientRect(),t=(C.itemsToShow-1)*C.gap;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 n;const{snapAlign:a="N/A",wrapAround:l,itemsToShow:i=1}=e;if(l)return Math.max(t-1,0);const o=null!==(n={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!==n?n:0;return Math.max(o,0)}({config:C,slidesCount:_.value}),L.value=function({config:e,slidesCount:t}){var n;const{snapAlign:a="N/A",wrapAround:l,itemsToShow:i=1}=e;return l||i>t?0:null!==(n={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!==n?n:0}({config:C,slidesCount:_.value}),C.wrapAround||(M.value=w({val:M.value,max:k.value,min:L.value})))}u((()=>{s((()=>$())),setTimeout((()=>$()),1e3),R(),K(),window.addEventListener("resize",B,{passive:!0}),E=new ResizeObserver(B),g.value&&E.observe(g.value),n("init")})),d((()=>{D&&clearTimeout(D),j&&clearInterval(j),E&&g.value&&(E.unobserve(g.value),E=null),window.removeEventListener("resize",B,{passive:!0})}));let z=!1;const V={x:0,y:0},P={x:0,y:0},U=a({x:0,y:0}),Y=l(!1),W=l(!1),H=()=>{Y.value=!0},G=()=>{Y.value=!1};function q(e){["INPUT","TEXTAREA","SELECT"].includes(e.target.tagName)||(z="touchstart"===e.type,z||e.preventDefault(),!z&&0!==e.button||Z.value||(V.x=z?e.touches[0].clientX:e.clientX,V.y=z?e.touches[0].clientY:e.clientY,document.addEventListener(z?"touchmove":"mousemove",F),document.addEventListener(z?"touchend":"mouseup",J)))}const F=function(e){let t=!1;return function(...n){t||(t=!0,requestAnimationFrame((()=>{e.apply(this,n),t=!1})))}}((e=>{W.value=!0,P.x=z?e.touches[0].clientX:e.clientX,P.y=z?e.touches[0].clientY:e.clientY;const t=P.x-V.x,n=P.y-V.y;U.y=n,U.x=t}));function J(){const e="rtl"===C.dir?-1:1,t=.4*Math.sign(U.x),n=Math.round(U.x/I.value+t)*e;if(n&&!z){const e=t=>{t.preventDefault(),window.removeEventListener("click",e)};window.addEventListener("click",e)}ee(M.value-n),U.x=0,U.y=0,W.value=!1,document.removeEventListener(z?"touchmove":"mousemove",F),document.removeEventListener(z?"touchend":"mouseup",J)}function K(){!C.autoplay||C.autoplay<=0||(j=setInterval((()=>{C.pauseAutoplayOnHover&&Y.value||te()}),C.autoplay))}function Q(){j&&(clearInterval(j),j=null),K()}const Z=l(!1);function ee(e){const t=C.wrapAround?e:w({val:e,max:k.value,min:L.value});M.value===t||Z.value||(n("slide-start",{slidingToIndex:e,currentSlideIndex:M.value,prevSlideIndex:N.value,slidesCount:_.value}),Z.value=!0,N.value=M.value,M.value=t,D=setTimeout((()=>{if(C.wrapAround){const a=x({val:t,max:k.value,min:0});a!==M.value&&(M.value=a,n("loop",{currentSlideIndex:M.value,slidingToIndex:e}))}n("update:modelValue",M.value),n("slide-end",{currentSlideIndex:M.value,prevSlideIndex:N.value,slidesCount:_.value}),Z.value=!1,Q()}),C.transition))}function te(){ee(M.value+C.itemsToScroll)}function ne(){ee(M.value-C.itemsToScroll)}const ae={slideTo:ee,next:te,prev:ne};r("nav",ae),r("isSliding",Z);const le=o((()=>{const e="rtl"===C.dir?-1:1,t=function({config:e,currentSlide:t,slidesCount:n}){const{snapAlign:a="N/A",wrapAround:l,itemsToShow:i=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})(a,i);return l?t-o:w({val:t-o,max:n-i,min:0})}({config:C,currentSlide:M.value,slidesCount:_.value});return t*I.value*e})),ie=o((()=>({transform:`translateX(${U.x-le.value}px)`,transition:`${Z.value?C.transition:0}ms`,margin:C.wrapAround?`0 -${_.value*I.value}px`:"",width:"100%",gap:`${C.gap}px`})));function oe(){R(),X(),$(),Q()}Object.keys(h).forEach((t=>{["modelValue"].includes(t)||c((()=>e[t]),oe)})),c((()=>e.modelValue),(e=>{e!==M.value&&ee(Number(e))})),c(_,X),n("before-init");const re={config:C,slidesCount:_,slideWidth:y,next:te,prev:ne,slideTo:ee,currentSlide:M,maxSlide:k,minSlide:L,middleSlide:O};p({updateBreakpointsConfig:R,updateSlidesData:X,updateSlideWidth:$,restartCarousel:oe,slideTo:ee,next:te,prev:ne,nav:ae,data:re});const ue=t.default||t.slides,se=t.addons,de=a(re);return()=>{const e=b(null==ue?void 0:ue(de)),t=(null==se?void 0:se(de))||[];e.forEach(((e,t)=>e.props.index=t));let n=e;if(C.wrapAround){const t=e.map(((t,n)=>v(t,{index:-e.length+n,isClone:!0,key:`clone-before-${n}`}))),a=e.map(((t,n)=>v(t,{index:e.length+n,isClone:!0,key:`clone-after-${n}`})));n=[...t,...e,...a]}S.value=e,_.value=Math.max(e.length,1);const a=i("ol",{class:"carousel__track",style:ie.value,onMousedownCapture:C.mouseDrag?q:null,onTouchstartPassiveCapture:C.touchDrag?q:null},n),l=i("div",{class:"carousel__viewport"},a);return i("section",{ref:g,class:{carousel:!0,"is-sliding":Z.value,"is-dragging":W.value,"is-hover":Y.value,"carousel--rtl":"rtl"===C.dir},dir:C.dir,"aria-label":C.i18n.ariaGallery,tabindex:"0",onMouseenter:H,onMouseleave:G},[l,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=n("config",a(Object.assign({},f))),l=String(e.name),o=`icon${l.charAt(0).toUpperCase()+l.slice(1)}`;if(!l||"string"!=typeof l||!(l in y))return;const r=i("path",{d:T[l]}),u=t.i18n[o]||e.title||l,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=n("config",a(Object.assign({},f))),d=n("maxSlide",l(1)),c=n("minSlide",l(1)),v=n("currentSlide",l(1)),p=n("nav",{}),{dir:m,wrapAround:g,i18n:h}=s,w="rtl"===m;return[i("button",{type:"button",class:["carousel__prev",!g&&v.value<=c.value&&"carousel__prev--disabled",null==o?void 0:o.class],"aria-label":h.ariaPreviousSlide,title:h.ariaPreviousSlide,onClick:p.prev},(null==u?void 0:u())||i(C,{name:w?"arrowRight":"arrowLeft"})),i("button",{type:"button",class:["carousel__next",!g&&v.value>=d.value&&"carousel__next--disabled",null==o?void 0:o.class],"aria-label":h.ariaNextSlide,title:h.ariaNextSlide,onClick:p.next},(null==r?void 0:r())||i(C,{name:w?"arrowLeft":"arrowRight"}))]},N=()=>{const e=n("config",a(Object.assign({},f))),t=n("maxSlide",l(1)),o=n("minSlide",l(1)),r=n("currentSlide",l(1)),u=n("nav",{}),s=e=>x({val:r.value,max:t.value,min:0})===e,d=[];for(let n=o.value;n<t.value+1;n++){const t=S(e.i18n.ariaNavigateToSlide,{slideNumber:n+1}),a=i("button",{type:"button",class:{"carousel__pagination-button":!0,"carousel__pagination-button--active":s(n)},"aria-label":t,title:t,onClick:()=>u.slideTo(n)}),l=i("li",{class:"carousel__pagination-item",key:n},a);d.push(l)}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=n("config",a(Object.assign({},f))),u=n("currentSlide",l(0)),s=n("slidesToScroll",l(0)),d=n("isSliding",l(!1)),c=n("slideWidth",l(0)),v=o((()=>e.index===u.value)),p=o((()=>e.index===u.value-1)),m=o((()=>e.index===u.value+1)),g=o((()=>{const t=Math.floor(s.value),n=Math.ceil(s.value+r.itemsToShow-1);return e.index>=t&&e.index<=n})),h=o((()=>r.gap?`${c.value}px`:100/r.itemsToShow+"%"));return()=>{var n;return i("li",{style:{width:h.value},class:{carousel__slide:!0,"carousel__slide--clone":e.isClone,"carousel__slide--visible":g.value,"carousel__slide--active":v.value,"carousel__slide--prev":p.value,"carousel__slide--next":m.value,"carousel__slide--sliding":d.value},"aria-hidden":!g.value},null===(n=t.default)||void 0===n?void 0:n.call(t,{isActive:v.value,isClone:e.isClone,isPrev:p.value,isNext:m.value,isSliding:d.value,isVisible:g.value}))}}});export{_ as Carousel,C as Icon,M as Navigation,N as Pagination,O as Slide}; |
| /** | ||
| * Vue 3 Carousel 0.5.1 | ||
| * Vue 3 Carousel 0.6.0 | ||
| * (c) 2024 | ||
@@ -32,3 +32,3 @@ * @license MIT | ||
| autoplay: 0, | ||
| throttle: 16, | ||
| gap: 0, | ||
| wrapAround: false, | ||
@@ -61,5 +61,5 @@ pauseAutoplayOnHover: false, | ||
| }, | ||
| // control max drag | ||
| throttle: { | ||
| default: DEFAULT_CONFIG.throttle, | ||
| // control the gap between slides | ||
| gap: { | ||
| default: DEFAULT_CONFIG.gap, | ||
| type: Number, | ||
@@ -131,54 +131,52 @@ }, | ||
| /** | ||
| * Determines the maximum slide index based on the configuration. | ||
| * | ||
| * @param {Args} args - The carousel configuration and slide count. | ||
| * @returns {number} The maximum slide index. | ||
| */ | ||
| function getMaxSlideIndex({ config, slidesCount }) { | ||
| const { snapAlign, wrapAround, itemsToShow = 1 } = config; | ||
| var _a; | ||
| const { snapAlign = 'N/A', wrapAround, itemsToShow = 1 } = config; | ||
| // If wrapAround is enabled, the max index is the last slide | ||
| if (wrapAround) { | ||
| return Math.max(slidesCount - 1, 0); | ||
| } | ||
| let output; | ||
| switch (snapAlign) { | ||
| case 'start': | ||
| output = slidesCount - itemsToShow; | ||
| break; | ||
| case 'end': | ||
| output = slidesCount - 1; | ||
| break; | ||
| case 'center': | ||
| case 'center-odd': | ||
| output = slidesCount - Math.ceil((itemsToShow - 0.5) / 2); | ||
| break; | ||
| case 'center-even': | ||
| output = slidesCount - Math.ceil(itemsToShow / 2); | ||
| break; | ||
| default: | ||
| output = 0; | ||
| break; | ||
| } | ||
| return Math.max(output, 0); | ||
| // Map snapAlign values to calculation logic | ||
| const snapAlignCalculations = { | ||
| start: Math.ceil(slidesCount - itemsToShow), | ||
| end: Math.ceil(slidesCount - 1), | ||
| center: slidesCount - Math.ceil((itemsToShow - 0.5) / 2), | ||
| 'center-odd': slidesCount - Math.ceil((itemsToShow - 0.5) / 2), | ||
| 'center-even': slidesCount - Math.ceil(itemsToShow / 2), | ||
| }; | ||
| // Compute the max index based on snapAlign, or default to 0 | ||
| const calculateMaxIndex = (_a = snapAlignCalculations[snapAlign]) !== null && _a !== void 0 ? _a : 0; | ||
| // Return the result ensuring it's non-negative | ||
| return Math.max(calculateMaxIndex, 0); | ||
| } | ||
| /** | ||
| * Determines the minimum slide index based on the configuration. | ||
| * | ||
| * @param {Args} args - The carousel configuration and slide count. | ||
| * @returns {number} The minimum slide index. | ||
| */ | ||
| function getMinSlideIndex({ config, slidesCount }) { | ||
| const { wrapAround, snapAlign, itemsToShow = 1 } = config; | ||
| let output = 0; | ||
| var _a; | ||
| const { snapAlign = 'N/A', wrapAround, itemsToShow = 1 } = config; | ||
| // If wrapAround is enabled or itemsToShow exceeds slidesCount, the minimum index is always 0 | ||
| if (wrapAround || itemsToShow > slidesCount) { | ||
| return output; | ||
| return 0; | ||
| } | ||
| switch (snapAlign) { | ||
| case 'start': | ||
| output = 0; | ||
| break; | ||
| case 'end': | ||
| output = itemsToShow - 1; | ||
| break; | ||
| case 'center': | ||
| case 'center-odd': | ||
| output = Math.floor((itemsToShow - 1) / 2); | ||
| break; | ||
| case 'center-even': | ||
| output = Math.floor((itemsToShow - 2) / 2); | ||
| break; | ||
| default: | ||
| output = 0; | ||
| break; | ||
| } | ||
| return output; | ||
| // Map of snapAlign to offset calculations | ||
| const snapAlignCalculations = { | ||
| start: 0, | ||
| end: Math.floor(itemsToShow - 1), | ||
| center: Math.floor((itemsToShow - 1) / 2), | ||
| 'center-odd': Math.floor((itemsToShow - 1) / 2), | ||
| 'center-even': Math.floor((itemsToShow - 2) / 2), | ||
| }; | ||
| // Return the calculated offset or default to 0 for invalid snapAlign values | ||
| return (_a = snapAlignCalculations[snapAlign]) !== null && _a !== void 0 ? _a : 0; | ||
| } | ||
@@ -193,25 +191,26 @@ | ||
| function getSlidesToScroll({ config, currentSlide, slidesCount }) { | ||
| const { snapAlign, wrapAround, itemsToShow = 1 } = config; | ||
| let output = currentSlide; | ||
| switch (snapAlign) { | ||
| case 'center': | ||
| case 'center-odd': | ||
| output -= (itemsToShow - 1) / 2; | ||
| break; | ||
| case 'center-even': | ||
| output -= (itemsToShow - 2) / 2; | ||
| break; | ||
| case 'end': | ||
| output -= itemsToShow - 1; | ||
| break; | ||
| const calculateOffset = (snapAlign, itemsToShow) => { | ||
| var _a; | ||
| const offsetMap = { | ||
| start: 0, | ||
| center: (itemsToShow - 1) / 2, | ||
| 'center-odd': (itemsToShow - 1) / 2, | ||
| 'center-even': (itemsToShow - 2) / 2, | ||
| end: itemsToShow - 1, | ||
| }; | ||
| return (_a = offsetMap[snapAlign]) !== null && _a !== void 0 ? _a : 0; // Fallback to 0 for unknown snapAlign | ||
| }; | ||
| function getScrolledIndex({ config, currentSlide, slidesCount }) { | ||
| const { snapAlign = 'N/A', wrapAround, itemsToShow = 1 } = config; | ||
| // Calculate the offset based on snapAlign | ||
| const offset = calculateOffset(snapAlign, itemsToShow); | ||
| // Compute the index with or without wrapAround | ||
| if (!wrapAround) { | ||
| return getNumberInRange({ | ||
| val: currentSlide - offset, | ||
| max: slidesCount - itemsToShow, | ||
| min: 0, | ||
| }); | ||
| } | ||
| if (wrapAround) { | ||
| return output; | ||
| } | ||
| return getNumberInRange({ | ||
| val: output, | ||
| max: slidesCount - itemsToShow, | ||
| min: 0, | ||
| }); | ||
| return currentSlide - offset; | ||
| } | ||
@@ -245,13 +244,11 @@ | ||
| // eslint-disable-next-line no-unused-vars | ||
| function throttle(fn, limit) { | ||
| let inThrottle; | ||
| if (!limit) { | ||
| return fn; | ||
| } | ||
| function throttle(fn) { | ||
| let isRunning = false; | ||
| return function (...args) { | ||
| const self = this; | ||
| if (!inThrottle) { | ||
| fn.apply(self, args); | ||
| inThrottle = true; | ||
| setTimeout(() => (inThrottle = false), limit); | ||
| if (!isRunning) { | ||
| isRunning = true; | ||
| requestAnimationFrame(() => { | ||
| fn.apply(this, args); | ||
| isRunning = false; | ||
| }); | ||
| } | ||
@@ -322,2 +319,3 @@ }; | ||
| let resizeObserver = null; | ||
| const effectiveSlideWidth = vue.computed(() => slideWidth.value + config.gap); | ||
| vue.provide('config', config); | ||
@@ -363,3 +361,6 @@ vue.provide('slidesCount', slidesCount); | ||
| const rect = root.value.getBoundingClientRect(); | ||
| slideWidth.value = rect.width / config.itemsToShow; | ||
| // Calculate the total gap space | ||
| const totalGap = (config.itemsToShow - 1) * config.gap; | ||
| // Adjust the slide width to account for the gap | ||
| slideWidth.value = (rect.width - totalGap) / config.itemsToShow; | ||
| } | ||
@@ -447,7 +448,7 @@ function updateSlidesData() { | ||
| dragged.x = deltaX; | ||
| }, config.throttle); | ||
| }); | ||
| function handleDragEnd() { | ||
| const direction = config.dir === 'rtl' ? -1 : 1; | ||
| const tolerance = Math.sign(dragged.x) * 0.4; | ||
| const draggedSlides = Math.round(dragged.x / slideWidth.value + tolerance) * direction; | ||
| const draggedSlides = Math.round(dragged.x / effectiveSlideWidth.value + tolerance) * direction; | ||
| // Prevent clicking if there is clicked slides | ||
@@ -550,18 +551,22 @@ if (draggedSlides && !isTouch) { | ||
| */ | ||
| const slidesToScroll = vue.computed(() => getSlidesToScroll({ | ||
| config, | ||
| currentSlide: currentSlideIndex.value, | ||
| slidesCount: slidesCount.value, | ||
| })); | ||
| vue.provide('slidesToScroll', slidesToScroll); | ||
| const trackStyle = vue.computed(() => { | ||
| const xScroll = vue.computed(() => { | ||
| const direction = config.dir === 'rtl' ? -1 : 1; | ||
| const xScroll = slidesToScroll.value * slideWidth.value * direction; | ||
| return { | ||
| transform: `translateX(${dragged.x - xScroll}px)`, | ||
| transition: `${isSliding.value ? config.transition : 0}ms`, | ||
| margin: config.wrapAround ? `0 -${slidesCount.value * slideWidth.value}px` : '', | ||
| width: `100%`, | ||
| }; | ||
| const scrolledIndex = getScrolledIndex({ | ||
| config, | ||
| currentSlide: currentSlideIndex.value, | ||
| slidesCount: slidesCount.value, | ||
| }); | ||
| // Calculate the total scroll offset | ||
| const totalOffset = scrolledIndex * effectiveSlideWidth.value; | ||
| return totalOffset * direction; | ||
| }); | ||
| const trackStyle = vue.computed(() => ({ | ||
| transform: `translateX(${dragged.x - xScroll.value}px)`, | ||
| transition: `${isSliding.value ? config.transition : 0}ms`, | ||
| margin: config.wrapAround | ||
| ? `0 -${slidesCount.value * effectiveSlideWidth.value}px` | ||
| : '', | ||
| width: `100%`, | ||
| gap: `${config.gap}px`, | ||
| })); | ||
| function restartCarousel() { | ||
@@ -782,2 +787,3 @@ updateBreakpointsConfig(); | ||
| const isSliding = vue.inject('isSliding', vue.ref(false)); | ||
| const slideWidth = vue.inject('slideWidth', vue.ref(0)); | ||
| const isActive = vue.computed(() => props.index === currentSlide.value); | ||
@@ -791,6 +797,12 @@ const isPrev = vue.computed(() => props.index === currentSlide.value - 1); | ||
| }); | ||
| const widthStyle = vue.computed(() => { | ||
| if (config.gap) { | ||
| return `${slideWidth.value}px`; | ||
| } | ||
| return `${100 / config.itemsToShow}%`; | ||
| }); | ||
| return () => { | ||
| var _a; | ||
| return vue.h('li', { | ||
| style: { width: `${100 / config.itemsToShow}%` }, | ||
| style: { width: widthStyle.value }, | ||
| class: { | ||
@@ -797,0 +809,0 @@ carousel__slide: true, |
| /** | ||
| * Vue 3 Carousel 0.5.1 | ||
| * Vue 3 Carousel 0.6.0 | ||
| * (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","rtl"],o={itemsToShow:1,itemsToScroll:1,modelValue:0,transition:300,autoplay:0,throttle:16,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"}},l={itemsToShow:{default:o.itemsToShow,type:Number},itemsToScroll:{default:o.itemsToScroll,type:Number},wrapAround:{default:o.wrapAround,type:Boolean},throttle:{default:o.throttle,type:Number},snapAlign:{default:o.snapAlign,validator:e=>n.includes(e)},transition:{default:o.transition,type:Number},breakpointMode:{default:o.breakpointMode,validator:e=>i.includes(e)},breakpoints:{default:o.breakpoints,type:Object},autoplay:{default:o.autoplay,type:Number},pauseAutoplayOnHover:{default:o.pauseAutoplayOnHover,type:Boolean},modelValue:{default:void 0,type:Number},mouseDrag:{default:o.mouseDrag,type:Boolean},touchDrag:{default:o.touchDrag,type:Boolean},dir:{default:o.dir,validator:e=>a.includes(e)},i18n:{default:o.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({},o))),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:l,setup(e,{slots:n,emit:i,expose:a}){var c;const d=t.ref(null),p=t.ref([]),f=t.ref(0),m=t.ref(0),g=t.computed((()=>Object.assign(Object.assign(Object.assign({},o),e),{i18n:Object.assign(Object.assign({},o.i18n),e.i18n),breakpoints:void 0}))),h=t.reactive(Object.assign({},g.value)),b=t.ref(null!==(c=e.modelValue)&&void 0!==c?c:0),w=t.ref(0),x=t.ref(0),S=t.ref(0),y=t.ref(0);let _=null,j=null,C=null;function T(){var t;if(!e.breakpoints)return;const n=("carousel"===h.breakpointMode?null===(t=d.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",S),t.provide("minSlide",y),t.provide("slideWidth",f);const A=function(e,t){let n;return function(...i){n&&clearTimeout(n),n=setTimeout((()=>{e(...i),n=null}),t)}}((()=>{T(),M(),k()}),16);function k(){if(!d.value)return;const e=d.value.getBoundingClientRect();f.value=e.width/h.itemsToShow}function M(){m.value<=0||(x.value=Math.ceil((m.value-1)/2),S.value=function({config:e,slidesCount:t}){const{snapAlign:n,wrapAround:i,itemsToShow:a=1}=e;if(i)return Math.max(t-1,0);let o;switch(n){case"start":o=t-a;break;case"end":o=t-1;break;case"center":case"center-odd":o=t-Math.ceil((a-.5)/2);break;case"center-even":o=t-Math.ceil(a/2);break;default:o=0}return Math.max(o,0)}({config:h,slidesCount:m.value}),y.value=function({config:e,slidesCount:t}){const{wrapAround:n,snapAlign:i,itemsToShow:a=1}=e;let o=0;if(n||a>t)return o;switch(i){case"start":default:o=0;break;case"end":o=a-1;break;case"center":case"center-odd":o=Math.floor((a-1)/2);break;case"center-even":o=Math.floor((a-2)/2)}return o}({config:h,slidesCount:m.value}),h.wrapAround||(b.value=r({val:b.value,max:S.value,min:y.value})))}t.onMounted((()=>{t.nextTick((()=>k())),setTimeout((()=>k()),1e3),T(),P(),window.addEventListener("resize",A,{passive:!0}),C=new ResizeObserver(A),d.value&&C.observe(d.value),i("init")})),t.onUnmounted((()=>{j&&clearTimeout(j),_&&clearInterval(_),C&&d.value&&(C.unobserve(d.value),C=null),window.removeEventListener("resize",A,{passive:!0})}));let N=!1;const O={x:0,y:0},L={x:0,y:0},D=t.reactive({x:0,y:0}),E=t.ref(!1),I=t.ref(!1),R=()=>{E.value=!0},V=()=>{E.value=!1};function B(e){["INPUT","TEXTAREA","SELECT"].includes(e.target.tagName)||(N="touchstart"===e.type,N||e.preventDefault(),!N&&0!==e.button||$.value||(O.x=N?e.touches[0].clientX:e.clientX,O.y=N?e.touches[0].clientY:e.clientY,document.addEventListener(N?"touchmove":"mousemove",X),document.addEventListener(N?"touchend":"mouseup",z)))}const X=function(e,t){let n;return t?function(...i){const a=this;n||(e.apply(a,i),n=!0,setTimeout((()=>n=!1),t))}:e}((e=>{I.value=!0,L.x=N?e.touches[0].clientX:e.clientX,L.y=N?e.touches[0].clientY:e.clientY;const t=L.x-O.x,n=L.y-O.y;D.y=n,D.x=t}),h.throttle);function z(){const e="rtl"===h.dir?-1:1,t=.4*Math.sign(D.x),n=Math.round(D.x/f.value+t)*e;if(n&&!N){const e=t=>{t.preventDefault(),window.removeEventListener("click",e)};window.addEventListener("click",e)}Y(b.value-n),D.x=0,D.y=0,I.value=!1,document.removeEventListener(N?"touchmove":"mousemove",X),document.removeEventListener(N?"touchend":"mouseup",z)}function P(){!h.autoplay||h.autoplay<=0||(_=setInterval((()=>{h.pauseAutoplayOnHover&&E.value||H()}),h.autoplay))}function U(){_&&(clearInterval(_),_=null),P()}const $=t.ref(!1);function Y(e){const t=h.wrapAround?e:r({val:e,max:S.value,min:y.value});b.value===t||$.value||(i("slide-start",{slidingToIndex:e,currentSlideIndex:b.value,prevSlideIndex:w.value,slidesCount:m.value}),$.value=!0,w.value=b.value,b.value=t,j=setTimeout((()=>{if(h.wrapAround){const n=s({val:t,max:S.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}),$.value=!1,U()}),h.transition))}function H(){Y(b.value+h.itemsToScroll)}function W(){Y(b.value-h.itemsToScroll)}const G={slideTo:Y,next:H,prev:W};t.provide("nav",G),t.provide("isSliding",$);const q=t.computed((()=>function({config:e,currentSlide:t,slidesCount:n}){const{snapAlign:i,wrapAround:a,itemsToShow:o=1}=e;let l=t;switch(i){case"center":case"center-odd":l-=(o-1)/2;break;case"center-even":l-=(o-2)/2;break;case"end":l-=o-1}return a?l:r({val:l,max:n-o,min:0})}({config:h,currentSlide:b.value,slidesCount:m.value})));t.provide("slidesToScroll",q);const F=t.computed((()=>{const e="rtl"===h.dir?-1:1,t=q.value*f.value*e;return{transform:`translateX(${D.x-t}px)`,transition:`${$.value?h.transition:0}ms`,margin:h.wrapAround?`0 -${m.value*f.value}px`:"",width:"100%"}}));function J(){T(),M(),k(),U()}Object.keys(l).forEach((n=>{["modelValue"].includes(n)||t.watch((()=>e[n]),J)})),t.watch((()=>e.modelValue),(e=>{e!==b.value&&Y(Number(e))})),t.watch(m,M),i("before-init");const K={config:h,slidesCount:m,slideWidth:f,next:H,prev:W,slideTo:Y,currentSlide:b,maxSlide:S,minSlide:y,middleSlide:x};a({updateBreakpointsConfig:T,updateSlidesData:M,updateSlideWidth:k,restartCarousel:J,slideTo:Y,next:H,prev:W,nav:G,data:K});const Q=n.default||n.slides,Z=n.addons,ee=t.reactive(K);return()=>{const e=u(null==Q?void 0:Q(ee)),n=(null==Z?void 0:Z(ee))||[];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:F.value,onMousedownCapture:h.mouseDrag?B:null,onTouchstartPassiveCapture:h.touchDrag?B:null},i),o=t.h("div",{class:"carousel__viewport"},a);return t.h("section",{ref:d,class:{carousel:!0,"is-sliding":$.value,"is-dragging":I.value,"is-hover":E.value,"carousel--rtl":"rtl"===h.dir},dir:h.dir,"aria-label":h.i18n.ariaGallery,tabindex:"0",onMouseenter:R,onMouseleave:V},[o,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({},o))),i=String(e.name),a=`icon${i.charAt(0).toUpperCase()+i.slice(1)}`;if(!i||"string"!=typeof i||!(i in d))return;const l=f[i],r=t.h("path",{d:l}),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({},o))),a=t.inject("currentSlide",t.ref(0)),l=t.inject("slidesToScroll",t.ref(0)),r=t.inject("isSliding",t.ref(!1)),u=t.computed((()=>e.index===a.value)),s=t.computed((()=>e.index===a.value-1)),c=t.computed((()=>e.index===a.value+1)),d=t.computed((()=>{const t=Math.floor(l.value),n=Math.ceil(l.value+i.itemsToShow-1);return e.index>=t&&e.index<=n}));return()=>{var a;return t.h("li",{style:{width:100/i.itemsToShow+"%"},class:{carousel__slide:!0,"carousel__slide--clone":e.isClone,"carousel__slide--visible":d.value,"carousel__slide--active":u.value,"carousel__slide--prev":s.value,"carousel__slide--next":c.value,"carousel__slide--sliding":r.value},"aria-hidden":!d.value},null===(a=n.default)||void 0===a?void 0:a.call(n,{isActive:u.value,isClone:e.isClone,isPrev:s.value,isNext:c.value,isSliding:r.value,isVisible:d.value}))}}});e.Carousel=p,e.Icon=m,e.Navigation=(e,{slots:n,attrs:i})=>{const{next:a,prev:l}=n||{},r=t.inject("config",t.reactive(Object.assign({},o))),u=t.inject("maxSlide",t.ref(1)),s=t.inject("minSlide",t.ref(1)),c=t.inject("currentSlide",t.ref(1)),d=t.inject("nav",{}),{dir:v,wrapAround:p,i18n:f}=r,g="rtl"===v;return[t.h("button",{type:"button",class:["carousel__prev",!p&&c.value<=s.value&&"carousel__prev--disabled",null==i?void 0:i.class],"aria-label":f.ariaPreviousSlide,title:f.ariaPreviousSlide,onClick:d.prev},(null==l?void 0:l())||t.h(m,{name:g?"arrowRight":"arrowLeft"})),t.h("button",{type:"button",class:["carousel__next",!p&&c.value>=u.value&&"carousel__next--disabled",null==i?void 0:i.class],"aria-label":f.ariaNextSlide,title:f.ariaNextSlide,onClick:d.next},(null==a?void 0:a())||t.h(m,{name:g?"arrowLeft":"arrowRight"}))]},e.Pagination=()=>{const e=t.inject("config",t.reactive(Object.assign({},o))),n=t.inject("maxSlide",t.ref(1)),i=t.inject("minSlide",t.ref(1)),a=t.inject("currentSlide",t.ref(1)),l=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:()=>l.slideTo(a)}),o=t.h("li",{class:"carousel__pagination-item",key:a},i);u.push(o)}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","rtl"],o={itemsToShow:1,itemsToScroll:1,modelValue:0,transition:300,autoplay:0,gap:0,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"}},l={itemsToShow:{default:o.itemsToShow,type:Number},itemsToScroll:{default:o.itemsToScroll,type:Number},wrapAround:{default:o.wrapAround,type:Boolean},gap:{default:o.gap,type:Number},snapAlign:{default:o.snapAlign,validator:e=>n.includes(e)},transition:{default:o.transition,type:Number},breakpointMode:{default:o.breakpointMode,validator:e=>i.includes(e)},breakpoints:{default:o.breakpoints,type:Object},autoplay:{default:o.autoplay,type:Number},pauseAutoplayOnHover:{default:o.pauseAutoplayOnHover,type:Boolean},modelValue:{default:void 0,type:Number},mouseDrag:{default:o.mouseDrag,type:Boolean},touchDrag:{default:o.touchDrag,type:Boolean},dir:{default:o.dir,validator:e=>a.includes(e)},i18n:{default:o.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({},o))),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:l,setup(e,{slots:n,emit:i,expose:a}){var c;const d=t.ref(null),p=t.ref([]),f=t.ref(0),m=t.ref(0),g=t.computed((()=>Object.assign(Object.assign(Object.assign({},o),e),{i18n:Object.assign(Object.assign({},o.i18n),e.i18n),breakpoints:void 0}))),h=t.reactive(Object.assign({},g.value)),w=t.ref(null!==(c=e.modelValue)&&void 0!==c?c:0),b=t.ref(0),x=t.ref(0),S=t.ref(0),y=t.ref(0);let j=null,A=null,_=null;const C=t.computed((()=>f.value+h.gap));function T(){var t;if(!e.breakpoints)return;const n=("carousel"===h.breakpointMode?null===(t=d.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",w),t.provide("maxSlide",S),t.provide("minSlide",y),t.provide("slideWidth",f);const M=function(e,t){let n;return function(...i){n&&clearTimeout(n),n=setTimeout((()=>{e(...i),n=null}),t)}}((()=>{T(),O(),N()}),16);function N(){if(!d.value)return;const e=d.value.getBoundingClientRect(),t=(h.itemsToShow-1)*h.gap;f.value=(e.width-t)/h.itemsToShow}function O(){m.value<=0||(x.value=Math.ceil((m.value-1)/2),S.value=function({config:e,slidesCount:t}){var n;const{snapAlign:i="N/A",wrapAround:a,itemsToShow:o=1}=e;if(a)return Math.max(t-1,0);const l=null!==(n={start:Math.ceil(t-o),end:Math.ceil(t-1),center:t-Math.ceil((o-.5)/2),"center-odd":t-Math.ceil((o-.5)/2),"center-even":t-Math.ceil(o/2)}[i])&&void 0!==n?n:0;return Math.max(l,0)}({config:h,slidesCount:m.value}),y.value=function({config:e,slidesCount:t}){var n;const{snapAlign:i="N/A",wrapAround:a,itemsToShow:o=1}=e;return a||o>t?0:null!==(n={start:0,end:Math.floor(o-1),center:Math.floor((o-1)/2),"center-odd":Math.floor((o-1)/2),"center-even":Math.floor((o-2)/2)}[i])&&void 0!==n?n:0}({config:h,slidesCount:m.value}),h.wrapAround||(w.value=r({val:w.value,max:S.value,min:y.value})))}t.onMounted((()=>{t.nextTick((()=>N())),setTimeout((()=>N()),1e3),T(),P(),window.addEventListener("resize",M,{passive:!0}),_=new ResizeObserver(M),d.value&&_.observe(d.value),i("init")})),t.onUnmounted((()=>{A&&clearTimeout(A),j&&clearInterval(j),_&&d.value&&(_.unobserve(d.value),_=null),window.removeEventListener("resize",M,{passive:!0})}));let k=!1;const L={x:0,y:0},D={x:0,y:0},E=t.reactive({x:0,y:0}),I=t.ref(!1),R=t.ref(!1),V=()=>{I.value=!0},B=()=>{I.value=!1};function $(e){["INPUT","TEXTAREA","SELECT"].includes(e.target.tagName)||(k="touchstart"===e.type,k||e.preventDefault(),!k&&0!==e.button||Y.value||(L.x=k?e.touches[0].clientX:e.clientX,L.y=k?e.touches[0].clientY:e.clientY,document.addEventListener(k?"touchmove":"mousemove",X),document.addEventListener(k?"touchend":"mouseup",z)))}const X=function(e){let t=!1;return function(...n){t||(t=!0,requestAnimationFrame((()=>{e.apply(this,n),t=!1})))}}((e=>{R.value=!0,D.x=k?e.touches[0].clientX:e.clientX,D.y=k?e.touches[0].clientY:e.clientY;const t=D.x-L.x,n=D.y-L.y;E.y=n,E.x=t}));function z(){const e="rtl"===h.dir?-1:1,t=.4*Math.sign(E.x),n=Math.round(E.x/C.value+t)*e;if(n&&!k){const e=t=>{t.preventDefault(),window.removeEventListener("click",e)};window.addEventListener("click",e)}W(w.value-n),E.x=0,E.y=0,R.value=!1,document.removeEventListener(k?"touchmove":"mousemove",X),document.removeEventListener(k?"touchend":"mouseup",z)}function P(){!h.autoplay||h.autoplay<=0||(j=setInterval((()=>{h.pauseAutoplayOnHover&&I.value||H()}),h.autoplay))}function U(){j&&(clearInterval(j),j=null),P()}const Y=t.ref(!1);function W(e){const t=h.wrapAround?e:r({val:e,max:S.value,min:y.value});w.value===t||Y.value||(i("slide-start",{slidingToIndex:e,currentSlideIndex:w.value,prevSlideIndex:b.value,slidesCount:m.value}),Y.value=!0,b.value=w.value,w.value=t,A=setTimeout((()=>{if(h.wrapAround){const n=s({val:t,max:S.value,min:0});n!==w.value&&(w.value=n,i("loop",{currentSlideIndex:w.value,slidingToIndex:e}))}i("update:modelValue",w.value),i("slide-end",{currentSlideIndex:w.value,prevSlideIndex:b.value,slidesCount:m.value}),Y.value=!1,U()}),h.transition))}function H(){W(w.value+h.itemsToScroll)}function G(){W(w.value-h.itemsToScroll)}const q={slideTo:W,next:H,prev:G};t.provide("nav",q),t.provide("isSliding",Y);const F=t.computed((()=>{const e="rtl"===h.dir?-1:1,t=function({config:e,currentSlide:t,slidesCount:n}){const{snapAlign:i="N/A",wrapAround:a,itemsToShow:o=1}=e,l=((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,o);return a?t-l:r({val:t-l,max:n-o,min:0})}({config:h,currentSlide:w.value,slidesCount:m.value});return t*C.value*e})),J=t.computed((()=>({transform:`translateX(${E.x-F.value}px)`,transition:`${Y.value?h.transition:0}ms`,margin:h.wrapAround?`0 -${m.value*C.value}px`:"",width:"100%",gap:`${h.gap}px`})));function K(){T(),O(),N(),U()}Object.keys(l).forEach((n=>{["modelValue"].includes(n)||t.watch((()=>e[n]),K)})),t.watch((()=>e.modelValue),(e=>{e!==w.value&&W(Number(e))})),t.watch(m,O),i("before-init");const Q={config:h,slidesCount:m,slideWidth:f,next:H,prev:G,slideTo:W,currentSlide:w,maxSlide:S,minSlide:y,middleSlide:x};a({updateBreakpointsConfig:T,updateSlidesData:O,updateSlideWidth:N,restartCarousel:K,slideTo:W,next:H,prev:G,nav:q,data:Q});const Z=n.default||n.slides,ee=n.addons,te=t.reactive(Q);return()=>{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:J.value,onMousedownCapture:h.mouseDrag?$:null,onTouchstartPassiveCapture:h.touchDrag?$:null},i),o=t.h("div",{class:"carousel__viewport"},a);return t.h("section",{ref:d,class:{carousel:!0,"is-sliding":Y.value,"is-dragging":R.value,"is-hover":I.value,"carousel--rtl":"rtl"===h.dir},dir:h.dir,"aria-label":h.i18n.ariaGallery,tabindex:"0",onMouseenter:V,onMouseleave:B},[o,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({},o))),i=String(e.name),a=`icon${i.charAt(0).toUpperCase()+i.slice(1)}`;if(!i||"string"!=typeof i||!(i in d))return;const l=f[i],r=t.h("path",{d:l}),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({},o))),a=t.inject("currentSlide",t.ref(0)),l=t.inject("slidesToScroll",t.ref(0)),r=t.inject("isSliding",t.ref(!1)),u=t.inject("slideWidth",t.ref(0)),s=t.computed((()=>e.index===a.value)),c=t.computed((()=>e.index===a.value-1)),d=t.computed((()=>e.index===a.value+1)),v=t.computed((()=>{const t=Math.floor(l.value),n=Math.ceil(l.value+i.itemsToShow-1);return e.index>=t&&e.index<=n})),p=t.computed((()=>i.gap?`${u.value}px`:100/i.itemsToShow+"%"));return()=>{var i;return t.h("li",{style:{width:p.value},class:{carousel__slide:!0,"carousel__slide--clone":e.isClone,"carousel__slide--visible":v.value,"carousel__slide--active":s.value,"carousel__slide--prev":c.value,"carousel__slide--next":d.value,"carousel__slide--sliding":r.value},"aria-hidden":!v.value},null===(i=n.default)||void 0===i?void 0:i.call(n,{isActive:s.value,isClone:e.isClone,isPrev:c.value,isNext:d.value,isSliding:r.value,isVisible:v.value}))}}});e.Carousel=p,e.Icon=m,e.Navigation=(e,{slots:n,attrs:i})=>{const{next:a,prev:l}=n||{},r=t.inject("config",t.reactive(Object.assign({},o))),u=t.inject("maxSlide",t.ref(1)),s=t.inject("minSlide",t.ref(1)),c=t.inject("currentSlide",t.ref(1)),d=t.inject("nav",{}),{dir:v,wrapAround:p,i18n:f}=r,g="rtl"===v;return[t.h("button",{type:"button",class:["carousel__prev",!p&&c.value<=s.value&&"carousel__prev--disabled",null==i?void 0:i.class],"aria-label":f.ariaPreviousSlide,title:f.ariaPreviousSlide,onClick:d.prev},(null==l?void 0:l())||t.h(m,{name:g?"arrowRight":"arrowLeft"})),t.h("button",{type:"button",class:["carousel__next",!p&&c.value>=u.value&&"carousel__next--disabled",null==i?void 0:i.class],"aria-label":f.ariaNextSlide,title:f.ariaNextSlide,onClick:d.next},(null==a?void 0:a())||t.h(m,{name:g?"arrowLeft":"arrowRight"}))]},e.Pagination=()=>{const e=t.inject("config",t.reactive(Object.assign({},o))),n=t.inject("maxSlide",t.ref(1)),i=t.inject("minSlide",t.ref(1)),a=t.inject("currentSlide",t.ref(1)),l=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:()=>l.slideTo(a)}),o=t.h("li",{class:"carousel__pagination-item",key:a},i);u.push(o)}return t.h("ol",{class:"carousel__pagination"},u)},e.Slide=g})); |
| { | ||
| "name": "vue3-carousel", | ||
| "version": "0.5.1", | ||
| "version": "0.6.0", | ||
| "type": "module", | ||
| "scripts": { | ||
| "build": "rollup -c", | ||
| "dev": "rollup -cw & npm run docs:dev", | ||
| "dev": "rollup -cw", | ||
| "docs:dev": "vitepress dev docs", | ||
@@ -9,0 +9,0 @@ "docs:build": "vitepress build docs", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.38%
276158
- Lines of code
- increased by1.17%
2169
No dependency changes