primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 18.2 kB
JavaScript
this.primevue=this.primevue||{},this.primevue.carousel=function(e,t,i,n,s,a,o,l){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=r(e),d=r(t),u=r(i),h=r(n),m=r(s),p=r(a),f={name:"Carousel",extends:c.default,emits:["update:page"],props:{value:null,page:{type:Number,default:0},numVisible:{type:Number,default:1},numScroll:{type:Number,default:1},responsiveOptions:Array,orientation:{type:String,default:"horizontal"},verticalViewPortHeight:{type:String,default:"300px"},contentClass:String,containerClass:String,indicatorsContentClass:String,circular:{type:Boolean,default:!1},autoplayInterval:{type:Number,default:0},showNavigators:{type:Boolean,default:!0},showIndicators:{type:Boolean,default:!0},prevButtonProps:{type:null,default:null},nextButtonProps:{type:null,default:null}},isRemainingItemsAdded:!1,data(){return{remainingItems:0,d_numVisible:this.numVisible,d_numScroll:this.numScroll,d_oldNumScroll:0,d_oldNumVisible:0,d_oldValue:null,d_page:this.page,totalShiftedItems:this.page*this.numScroll*-1,allowAutoplay:!!this.autoplayInterval,d_circular:this.circular||this.allowAutoplay,swipeThreshold:20}},watch:{page(e){this.d_page=e},circular(e){this.d_circular=e},numVisible(e,t){this.d_numVisible=e,this.d_oldNumVisible=t},numScroll(e,t){this.d_oldNumScroll=t,this.d_numScroll=e},value(e){this.d_oldValue=e}},mounted(){let e=!1;if(this.$el.setAttribute(this.attributeSelector,""),this.createStyle(),this.calculatePosition(),this.responsiveOptions&&this.bindDocumentListeners(),this.isCircular()){let t=this.totalShiftedItems;0===this.d_page?t=-1*this.d_numVisible:0===t&&(t=-1*this.value.length,this.remainingItems>0&&(this.isRemainingItemsAdded=!0)),t!==this.totalShiftedItems&&(this.totalShiftedItems=t,e=!0)}!e&&this.isAutoplay()&&this.startAutoplay()},updated(){const e=this.isCircular();let t=!1,i=this.totalShiftedItems;if(this.autoplayInterval&&this.stopAutoplay(),this.d_oldNumScroll!==this.d_numScroll||this.d_oldNumVisible!==this.d_numVisible||this.d_oldValue.length!==this.value.length){this.remainingItems=(this.value.length-this.d_numVisible)%this.d_numScroll;let n=this.d_page;0!==this.totalIndicators&&n>=this.totalIndicators&&(n=this.totalIndicators-1,this.$emit("update:page",n),this.d_page=n,t=!0),i=n*this.d_numScroll*-1,e&&(i-=this.d_numVisible),n===this.totalIndicators-1&&this.remainingItems>0?(i+=-1*this.remainingItems+this.d_numScroll,this.isRemainingItemsAdded=!0):this.isRemainingItemsAdded=!1,i!==this.totalShiftedItems&&(this.totalShiftedItems=i,t=!0),this.d_oldNumScroll=this.d_numScroll,this.d_oldNumVisible=this.d_numVisible,this.d_oldValue=this.value,this.$refs.itemsContainer.style.transform=this.isVertical()?`translate3d(0, ${i*(100/this.d_numVisible)}%, 0)`:`translate3d(${i*(100/this.d_numVisible)}%, 0, 0)`}e&&(0===this.d_page?i=-1*this.d_numVisible:0===i&&(i=-1*this.value.length,this.remainingItems>0&&(this.isRemainingItemsAdded=!0)),i!==this.totalShiftedItems&&(this.totalShiftedItems=i,t=!0)),!t&&this.isAutoplay()&&this.startAutoplay()},beforeUnmount(){this.responsiveOptions&&this.unbindDocumentListeners(),this.autoplayInterval&&this.stopAutoplay()},methods:{step(e,t){let i=this.totalShiftedItems;const n=this.isCircular();if(null!=t)i=this.d_numScroll*t*-1,n&&(i-=this.d_numVisible),this.isRemainingItemsAdded=!1;else{i+=this.d_numScroll*e,this.isRemainingItemsAdded&&(i+=this.remainingItems-this.d_numScroll*e,this.isRemainingItemsAdded=!1);let s=n?i+this.d_numVisible:i;t=Math.abs(Math.floor(s/this.d_numScroll))}n&&this.d_page===this.totalIndicators-1&&-1===e?(i=-1*(this.value.length+this.d_numVisible),t=0):n&&0===this.d_page&&1===e?(i=0,t=this.totalIndicators-1):t===this.totalIndicators-1&&this.remainingItems>0&&(i+=-1*this.remainingItems-this.d_numScroll*e,this.isRemainingItemsAdded=!0),this.$refs.itemsContainer&&(o.DomHandler.removeClass(this.$refs.itemsContainer,"p-items-hidden"),this.$refs.itemsContainer.style.transform=this.isVertical()?`translate3d(0, ${i*(100/this.d_numVisible)}%, 0)`:`translate3d(${i*(100/this.d_numVisible)}%, 0, 0)`,this.$refs.itemsContainer.style.transition="transform 500ms ease 0s"),this.totalShiftedItems=i,this.$emit("update:page",t),this.d_page=t},calculatePosition(){if(this.$refs.itemsContainer&&this.responsiveOptions){let e=window.innerWidth,t={numVisible:this.numVisible,numScroll:this.numScroll};for(let i=0;i<this.responsiveOptions.length;i++){let n=this.responsiveOptions[i];parseInt(n.breakpoint,10)>=e&&(t=n)}if(this.d_numScroll!==t.numScroll){let e=this.d_page;e=parseInt(e*this.d_numScroll/t.numScroll),this.totalShiftedItems=t.numScroll*e*-1,this.isCircular()&&(this.totalShiftedItems-=t.numVisible),this.d_numScroll=t.numScroll,this.$emit("update:page",e),this.d_page=e}this.d_numVisible!==t.numVisible&&(this.d_numVisible=t.numVisible)}},navBackward(e,t){(this.d_circular||0!==this.d_page)&&this.step(1,t),this.allowAutoplay=!1,e.cancelable&&e.preventDefault()},navForward(e,t){(this.d_circular||this.d_page<this.totalIndicators-1)&&this.step(-1,t),this.allowAutoplay=!1,e.cancelable&&e.preventDefault()},onIndicatorClick(e,t){let i=this.d_page;t>i?this.navForward(e,t):t<i&&this.navBackward(e,t)},onTransitionEnd(){this.$refs.itemsContainer&&(o.DomHandler.addClass(this.$refs.itemsContainer,"p-items-hidden"),this.$refs.itemsContainer.style.transition="",0!==this.d_page&&this.d_page!==this.totalIndicators-1||!this.isCircular()||(this.$refs.itemsContainer.style.transform=this.isVertical()?`translate3d(0, ${this.totalShiftedItems*(100/this.d_numVisible)}%, 0)`:`translate3d(${this.totalShiftedItems*(100/this.d_numVisible)}%, 0, 0)`))},onTouchStart(e){let t=e.changedTouches[0];this.startPos={x:t.pageX,y:t.pageY}},onTouchMove(e){e.cancelable&&e.preventDefault()},onTouchEnd(e){let t=e.changedTouches[0];this.isVertical()?this.changePageOnTouch(e,t.pageY-this.startPos.y):this.changePageOnTouch(e,t.pageX-this.startPos.x)},changePageOnTouch(e,t){Math.abs(t)>this.swipeThreshold&&(t<0?this.navForward(e):this.navBackward(e))},onIndicatorKeydown(e){switch(e.code){case"ArrowRight":this.onRightKey();break;case"ArrowLeft":this.onLeftKey();break;case"Home":this.onHomeKey(),e.preventDefault();break;case"End":this.onEndKey(),e.preventDefault();break;case"ArrowUp":case"ArrowDown":e.preventDefault();break;case"Tab":this.onTabKey()}},onRightKey(){const e=[...o.DomHandler.find(this.$refs.indicatorContent,".p-carousel-indicator")],t=this.findFocusedIndicatorIndex();this.changedFocusedIndicator(t,t+1===e.length?e.length-1:t+1)},onLeftKey(){const e=this.findFocusedIndicatorIndex();this.changedFocusedIndicator(e,e-1<=0?0:e-1)},onHomeKey(){const e=this.findFocusedIndicatorIndex();this.changedFocusedIndicator(e,0)},onEndKey(){const e=[...o.DomHandler.find(this.$refs.indicatorContent,".p-carousel-indicator")],t=this.findFocusedIndicatorIndex();this.changedFocusedIndicator(t,e.length-1)},onTabKey(){const e=[...o.DomHandler.find(this.$refs.indicatorContent,".p-carousel-indicator")],t=e.findIndex((e=>o.DomHandler.hasClass(e,"p-highlight"))),i=o.DomHandler.findSingle(this.$refs.indicatorContent,'.p-carousel-indicator > button[tabindex="0"]'),n=e.findIndex((e=>e===i.parentElement));e[n].children[0].tabIndex="-1",e[t].children[0].tabIndex="0"},findFocusedIndicatorIndex(){const e=[...o.DomHandler.find(this.$refs.indicatorContent,".p-carousel-indicator")],t=o.DomHandler.findSingle(this.$refs.indicatorContent,'.p-carousel-indicator > button[tabindex="0"]');return e.findIndex((e=>e===t.parentElement))},changedFocusedIndicator(e,t){const i=[...o.DomHandler.find(this.$refs.indicatorContent,".p-carousel-indicator")];i[e].children[0].tabIndex="-1",i[t].children[0].tabIndex="0",i[t].children[0].focus()},bindDocumentListeners(){this.documentResizeListener||(this.documentResizeListener=e=>{this.calculatePosition(e)},window.addEventListener("resize",this.documentResizeListener))},unbindDocumentListeners(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)},startAutoplay(){this.interval=setInterval((()=>{this.d_page===this.totalIndicators-1?this.step(-1,0):this.step(-1,this.d_page+1)}),this.autoplayInterval)},stopAutoplay(){this.interval&&clearInterval(this.interval)},createStyle(){this.carouselStyle||(this.carouselStyle=document.createElement("style"),this.carouselStyle.type="text/css",document.body.appendChild(this.carouselStyle));let e=`\n .p-carousel[${this.attributeSelector}] .p-carousel-item {\n flex: 1 0 ${100/this.d_numVisible}%\n }\n `;if(this.responsiveOptions){let t=[...this.responsiveOptions];t.sort(((e,t)=>{const i=e.breakpoint,n=t.breakpoint;let s=null;return s=null==i&&null!=n?-1:null!=i&&null==n?1:null==i&&null==n?0:"string"==typeof i&&"string"==typeof n?i.localeCompare(n,void 0,{numeric:!0}):i<n?-1:i>n?1:0,-1*s}));for(let i=0;i<t.length;i++){let n=t[i];e+=`\n screen and (max-width: ${n.breakpoint}) {\n .p-carousel[${this.attributeSelector}] .p-carousel-item {\n flex: 1 0 ${100/n.numVisible}%\n }\n }\n `}}this.carouselStyle.innerHTML=e},isVertical(){return"vertical"===this.orientation},isCircular(){return this.value&&this.d_circular&&this.value.length>=this.d_numVisible},isAutoplay(){return this.autoplayInterval&&this.allowAutoplay},firstIndex(){return this.isCircular()?-1*(this.totalShiftedItems+this.d_numVisible):-1*this.totalShiftedItems},lastIndex(){return this.firstIndex()+this.d_numVisible-1},ariaSlideNumber(e){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.slideNumber.replace(/{slideNumber}/g,e):void 0},ariaPageLabel(e){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g,e):void 0}},computed:{totalIndicators(){return this.value?Math.max(Math.ceil((this.value.length-this.d_numVisible)/this.d_numScroll)+1,0):0},backwardIsDisabled(){return this.value&&(!this.circular||this.value.length<this.d_numVisible)&&0===this.d_page},forwardIsDisabled(){return this.value&&(!this.circular||this.value.length<this.d_numVisible)&&(this.d_page===this.totalIndicators-1||0===this.totalIndicators)},containerClasses(){return["p-carousel-container",this.containerClass]},contentClasses(){return["p-carousel-content ",this.contentClass]},indicatorsContentClasses(){return["p-carousel-indicators p-reset",this.indicatorsContentClass]},ariaSlideLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.slide:void 0},ariaPrevButtonLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.prevPageLabel:void 0},ariaNextButtonLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.nextPageLabel:void 0},attributeSelector:()=>o.UniqueComponentId()},components:{ChevronRightIcon:h.default,ChevronDownIcon:d.default,ChevronLeftIcon:u.default,ChevronUpIcon:m.default},directives:{ripple:p.default}};const g=["aria-live"],v=["disabled","aria-label"],b=["aria-hidden","aria-label","aria-roledescription"],I=["disabled","aria-label"],y=["tabindex","aria-label","aria-current","onClick"];return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-carousel {\n display: flex;\n flex-direction: column;\n}\n.p-carousel-content {\n display: flex;\n flex-direction: column;\n overflow: auto;\n}\n.p-carousel-prev,\n.p-carousel-next {\n align-self: center;\n flex-grow: 0;\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n position: relative;\n}\n.p-carousel-container {\n display: flex;\n flex-direction: row;\n}\n.p-carousel-items-content {\n overflow: hidden;\n width: 100%;\n}\n.p-carousel-items-container {\n display: flex;\n flex-direction: row;\n}\n.p-carousel-indicators {\n display: flex;\n flex-direction: row;\n justify-content: center;\n flex-wrap: wrap;\n}\n.p-carousel-indicator > button {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Vertical */\n.p-carousel-vertical .p-carousel-container {\n flex-direction: column;\n}\n.p-carousel-vertical .p-carousel-items-container {\n flex-direction: column;\n height: 100%;\n}\n\n/* Keyboard Support */\n.p-items-hidden .p-carousel-item {\n visibility: hidden;\n}\n.p-items-hidden .p-carousel-item.p-carousel-item-active {\n visibility: visible;\n}\n"),f.render=function(e,t,i,n,s,a){const o=l.resolveDirective("ripple");return l.openBlock(),l.createElementBlock("div",l.mergeProps({class:["p-carousel p-component",{"p-carousel-vertical":a.isVertical(),"p-carousel-horizontal":!a.isVertical()}],role:"region"},e.ptm("root")),[e.$slots.header?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,class:"p-carousel-header"},e.ptm("header")),[l.renderSlot(e.$slots,"header")],16)):l.createCommentVNode("",!0),l.createElementVNode("div",l.mergeProps({class:a.contentClasses},e.ptm("content")),[l.createElementVNode("div",l.mergeProps({class:a.containerClasses,"aria-live":s.allowAutoplay?"polite":"off"},e.ptm("container")),[i.showNavigators?l.withDirectives((l.openBlock(),l.createElementBlock("button",l.mergeProps({key:0,type:"button",class:["p-carousel-prev p-link",{"p-disabled":a.backwardIsDisabled}],disabled:a.backwardIsDisabled,"aria-label":a.ariaPrevButtonLabel,onClick:t[0]||(t[0]=(...e)=>a.navBackward&&a.navBackward(...e))},{...i.prevButtonProps,...e.ptm("previousButton")}),[l.renderSlot(e.$slots,"previousicon",{},(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(a.isVertical()?"ChevronUpIcon":"ChevronLeftIcon"),l.mergeProps({class:"p-carousel-next-icon"},e.ptm("previousButtonIcon")),null,16))]))],16,v)),[[o]]):l.createCommentVNode("",!0),l.createElementVNode("div",l.mergeProps({class:"p-carousel-items-content",style:[{height:a.isVertical()?i.verticalViewPortHeight:"auto"}],onTouchend:t[2]||(t[2]=(...e)=>a.onTouchEnd&&a.onTouchEnd(...e)),onTouchstart:t[3]||(t[3]=(...e)=>a.onTouchStart&&a.onTouchStart(...e)),onTouchmove:t[4]||(t[4]=(...e)=>a.onTouchMove&&a.onTouchMove(...e))},e.ptm("itemsContent")),[l.createElementVNode("div",l.mergeProps({ref:"itemsContainer",class:"p-carousel-items-container",onTransitionend:t[1]||(t[1]=(...e)=>a.onTransitionEnd&&a.onTransitionEnd(...e))},e.ptm("itemsContainer")),[a.isCircular()?(l.openBlock(!0),l.createElementBlock(l.Fragment,{key:0},l.renderList(i.value.slice(-1*s.d_numVisible),((t,n)=>(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:n+"_scloned",class:["p-carousel-item p-carousel-item-cloned",{"p-carousel-item-active":-1*s.totalShiftedItems===i.value.length+s.d_numVisible,"p-carousel-item-start":0===n,"p-carousel-item-end":i.value.slice(-1*s.d_numVisible).length-1===n}]},e.ptm("itemCloned")),[l.renderSlot(e.$slots,"item",{data:t,index:n})],16)))),128)):l.createCommentVNode("",!0),(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(i.value,((t,i)=>(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:i,class:["p-carousel-item",{"p-carousel-item-active":a.firstIndex()<=i&&a.lastIndex()>=i,"p-carousel-item-start":a.firstIndex()===i,"p-carousel-item-end":a.lastIndex()===i}],role:"group","aria-hidden":a.firstIndex()>i||a.lastIndex()<i||void 0,"aria-label":a.ariaSlideNumber(i),"aria-roledescription":a.ariaSlideLabel},e.ptm("item")),[l.renderSlot(e.$slots,"item",{data:t,index:i})],16,b)))),128)),a.isCircular()?(l.openBlock(!0),l.createElementBlock(l.Fragment,{key:1},l.renderList(i.value.slice(0,s.d_numVisible),((t,n)=>(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:n+"_fcloned",class:["p-carousel-item p-carousel-item-cloned",{"p-carousel-item-active":0===s.totalShiftedItems,"p-carousel-item-start":0===n,"p-carousel-item-end":i.value.slice(0,s.d_numVisible).length-1===n}]},e.ptm("itemCloned")),[l.renderSlot(e.$slots,"item",{data:t,index:n})],16)))),128)):l.createCommentVNode("",!0)],16)],16),i.showNavigators?l.withDirectives((l.openBlock(),l.createElementBlock("button",l.mergeProps({key:1,type:"button",class:["p-carousel-next p-link",{"p-disabled":a.forwardIsDisabled}],disabled:a.forwardIsDisabled,"aria-label":a.ariaNextButtonLabel,onClick:t[5]||(t[5]=(...e)=>a.navForward&&a.navForward(...e))},{...i.nextButtonProps,...e.ptm("nextButton")}),[l.renderSlot(e.$slots,"nexticon",{},(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(a.isVertical()?"ChevronDownIcon":"ChevronRightIcon"),l.mergeProps({class:"p-carousel-prev-icon"},e.ptm("nextButtonIcon")),null,16))]))],16,I)),[[o]]):l.createCommentVNode("",!0)],16,g),a.totalIndicators>=0&&i.showIndicators?(l.openBlock(),l.createElementBlock("ul",l.mergeProps({key:0,ref:"indicatorContent",class:a.indicatorsContentClasses,onKeydown:t[6]||(t[6]=(...e)=>a.onIndicatorKeydown&&a.onIndicatorKeydown(...e))},e.ptm("indicators")),[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(a.totalIndicators,((t,i)=>(l.openBlock(),l.createElementBlock("li",l.mergeProps({key:"p-carousel-indicator-"+i.toString(),class:["p-carousel-indicator",{"p-highlight":s.d_page===i}]},e.ptm("indicator")),[l.createElementVNode("button",l.mergeProps({class:"p-link",type:"button",tabindex:s.d_page===i?"0":"-1","aria-label":a.ariaPageLabel(i+1),"aria-current":s.d_page===i?"page":void 0,onClick:e=>a.onIndicatorClick(e,i)},e.ptm("indicatorButton")),null,16,y)],16)))),128))],16)):l.createCommentVNode("",!0)],16),e.$slots.footer?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:1,class:"p-carousel-footer"},e.ptm("footer")),[l.renderSlot(e.$slots,"footer")],16)):l.createCommentVNode("",!0)],16)},f}(primevue.basecomponent,primevue.icons.chevrondown,primevue.icons.chevronleft,primevue.icons.chevronright,primevue.icons.chevronup,primevue.ripple,primevue.utils,Vue);