primevue
Version:
PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc
2 lines (1 loc) • 18.7 kB
JavaScript
import t from"primevue/icons/chevrondown";import e from"primevue/icons/chevronleft";import i from"primevue/icons/chevronright";import n from"primevue/icons/chevronup";import a from"primevue/ripple";import{DomHandler as s,ObjectUtils as o,UniqueComponentId as r}from"primevue/utils";import l from"primevue/basecomponent";import c from"primevue/carousel/style";import{resolveDirective as u,openBlock as d,createElementBlock as h,mergeProps as m,renderSlot as p,createCommentVNode as f,createElementVNode as v,withDirectives as b,createBlock as g,resolveDynamicComponent as y,Fragment as I,renderList as _}from"vue";function S(t){return V(t)||C(t)||w(t)||x()}function x(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function w(t,e){if(t){if("string"==typeof t)return $(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?$(t,e):void 0}}function C(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function V(t){if(Array.isArray(t))return $(t)}function $(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}var A={name:"Carousel",extends:{name:"BaseCarousel",extends:l,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}},style:c,provide:function(){return{$parentInstance:this}}},emits:["update:page"],isRemainingItemsAdded:!1,data:function(){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:function(t){t>this.d_page?this.navForward({},t):t<this.d_page&&this.navBackward({},t),this.d_page=t},circular:function(t){this.d_circular=t},numVisible:function(t,e){this.d_numVisible=t,this.d_oldNumVisible=e},numScroll:function(t,e){this.d_oldNumScroll=e,this.d_numScroll=t},value:function(t){this.d_oldValue=t}},mounted:function(){var t=!1;if(this.$el.setAttribute(this.attributeSelector,""),this.createStyle(),this.calculatePosition(),this.responsiveOptions&&this.bindDocumentListeners(),this.isCircular()){var e=this.totalShiftedItems;0===this.d_page?e=-1*this.d_numVisible:0===e&&(e=-1*this.value.length,this.remainingItems>0&&(this.isRemainingItemsAdded=!0)),e!==this.totalShiftedItems&&(this.totalShiftedItems=e,t=!0)}!t&&this.isAutoplay()&&this.startAutoplay()},updated:function(){var t=this.isCircular(),e=!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;var n=this.d_page;0!==this.totalIndicators&&n>=this.totalIndicators&&(this.$emit("update:page",n=this.totalIndicators-1),this.d_page=n,e=!0),i=n*this.d_numScroll*-1,t&&(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,e=!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, ".concat(i*(100/this.d_numVisible),"%, 0)"):"translate3d(".concat(i*(100/this.d_numVisible),"%, 0, 0)")}t&&(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,e=!0)),!e&&this.isAutoplay()&&this.startAutoplay()},beforeUnmount:function(){this.responsiveOptions&&this.unbindDocumentListeners(),this.autoplayInterval&&this.stopAutoplay()},methods:{getIndicatorPTOptions:function(t){return{context:{highlighted:t===this.d_page}}},step:function(t,e){var i=this.totalShiftedItems,n=this.isCircular();null!=e?(i=this.d_numScroll*e*-1,n&&(i-=this.d_numVisible),this.isRemainingItemsAdded=!1):(i+=this.d_numScroll*t,this.isRemainingItemsAdded&&(i+=this.remainingItems-this.d_numScroll*t,this.isRemainingItemsAdded=!1),e=Math.abs(Math.floor((n?i+this.d_numVisible:i)/this.d_numScroll)));n&&this.d_page===this.totalIndicators-1&&-1===t?(i=-1*(this.value.length+this.d_numVisible),e=0):n&&0===this.d_page&&1===t?(i=0,e=this.totalIndicators-1):e===this.totalIndicators-1&&this.remainingItems>0&&(i+=-1*this.remainingItems-this.d_numScroll*t,this.isRemainingItemsAdded=!0),this.$refs.itemsContainer&&(!this.isUnstyled&&s.removeClass(this.$refs.itemsContainer,"p-items-hidden"),this.$refs.itemsContainer.style.transform=this.isVertical()?"translate3d(0, ".concat(i*(100/this.d_numVisible),"%, 0)"):"translate3d(".concat(i*(100/this.d_numVisible),"%, 0, 0)"),this.$refs.itemsContainer.style.transition="transform 500ms ease 0s"),this.totalShiftedItems=i,this.$emit("update:page",e),this.d_page=e},calculatePosition:function(){if(this.$refs.itemsContainer&&this.responsiveOptions){for(var t=window.innerWidth,e={numVisible:this.numVisible,numScroll:this.numScroll},i=0;i<this.responsiveOptions.length;i++){var n=this.responsiveOptions[i];parseInt(n.breakpoint,10)>=t&&(e=n)}if(this.d_numScroll!==e.numScroll){var a=this.d_page;a=parseInt(a*this.d_numScroll/e.numScroll),this.totalShiftedItems=e.numScroll*a*-1,this.isCircular()&&(this.totalShiftedItems-=e.numVisible),this.d_numScroll=e.numScroll,this.$emit("update:page",a),this.d_page=a}this.d_numVisible!==e.numVisible&&(this.d_numVisible=e.numVisible)}},navBackward:function(t,e){(this.d_circular||0!==this.d_page)&&this.step(1,e),this.allowAutoplay=!1,t.cancelable&&t.preventDefault()},navForward:function(t,e){(this.d_circular||this.d_page<this.totalIndicators-1)&&this.step(-1,e),this.allowAutoplay=!1,t.cancelable&&t.preventDefault()},onIndicatorClick:function(t,e){var i=this.d_page;e>i?this.navForward(t,e):e<i&&this.navBackward(t,e)},onTransitionEnd:function(){this.$refs.itemsContainer&&(!this.isUnstyled&&s.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, ".concat(this.totalShiftedItems*(100/this.d_numVisible),"%, 0)"):"translate3d(".concat(this.totalShiftedItems*(100/this.d_numVisible),"%, 0, 0)")))},onTouchStart:function(t){var e=t.changedTouches[0];this.startPos={x:e.pageX,y:e.pageY}},onTouchMove:function(t){t.cancelable&&t.preventDefault()},onTouchEnd:function(t){var e=t.changedTouches[0];this.isVertical()?this.changePageOnTouch(t,e.pageY-this.startPos.y):this.changePageOnTouch(t,e.pageX-this.startPos.x)},changePageOnTouch:function(t,e){Math.abs(e)>this.swipeThreshold&&(e<0?this.navForward(t):this.navBackward(t))},onIndicatorKeydown:function(t){switch(t.code){case"ArrowRight":this.onRightKey();break;case"ArrowLeft":this.onLeftKey();break;case"Home":this.onHomeKey(),t.preventDefault();break;case"End":this.onEndKey(),t.preventDefault();break;case"ArrowUp":case"ArrowDown":case"PageUp":case"PageDown":t.preventDefault();break;case"Tab":this.onTabKey()}},onRightKey:function(){var t=S(s.find(this.$refs.indicatorContent,'[data-pc-section="indicator"]')),e=this.findFocusedIndicatorIndex();this.changedFocusedIndicator(e,e+1===t.length?t.length-1:e+1)},onLeftKey:function(){var t=this.findFocusedIndicatorIndex();this.changedFocusedIndicator(t,t-1<=0?0:t-1)},onHomeKey:function(){var t=this.findFocusedIndicatorIndex();this.changedFocusedIndicator(t,0)},onEndKey:function(){var t=S(s.find(this.$refs.indicatorContent,'[data-pc-section="indicator"]')),e=this.findFocusedIndicatorIndex();this.changedFocusedIndicator(e,t.length-1)},onTabKey:function(){var t=S(s.find(this.$refs.indicatorContent,'[data-pc-section="indicator"]')),e=t.findIndex((function(t){return!0===s.getAttribute(t,"data-p-highlight")})),i=s.findSingle(this.$refs.indicatorContent,'[data-pc-section="indicator"] > button[tabindex="0"]'),n=t.findIndex((function(t){return t===i.parentElement}));t[n].children[0].tabIndex="-1",t[e].children[0].tabIndex="0"},findFocusedIndicatorIndex:function(){var t=S(s.find(this.$refs.indicatorContent,'[data-pc-section="indicator"]')),e=s.findSingle(this.$refs.indicatorContent,'[data-pc-section="indicator"] > button[tabindex="0"]');return t.findIndex((function(t){return t===e.parentElement}))},changedFocusedIndicator:function(t,e){var i=S(s.find(this.$refs.indicatorContent,'[data-pc-section="indicator"]'));i[t].children[0].tabIndex="-1",i[e].children[0].tabIndex="0",i[e].children[0].focus()},bindDocumentListeners:function(){var t=this;this.documentResizeListener||(this.documentResizeListener=function(e){t.calculatePosition(e)},window.addEventListener("resize",this.documentResizeListener))},unbindDocumentListeners:function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)},startAutoplay:function(){var t=this;this.interval=setInterval((function(){t.step(-1,t.d_page===t.totalIndicators-1?0:t.d_page+1)}),this.autoplayInterval)},stopAutoplay:function(){this.interval&&clearInterval(this.interval)},createStyle:function(){var t;this.carouselStyle||(this.carouselStyle=document.createElement("style"),this.carouselStyle.type="text/css",s.setAttribute(this.carouselStyle,"nonce",null===(t=this.$primevue)||void 0===t||null===(t=t.config)||void 0===t||null===(t=t.csp)||void 0===t?void 0:t.nonce),document.body.appendChild(this.carouselStyle));var e="\n .p-carousel[".concat(this.attributeSelector,"] .p-carousel-item {\n flex: 1 0 ").concat(100/this.d_numVisible,"%\n }\n ");if(this.responsiveOptions&&!this.isUnstyled){var i=S(this.responsiveOptions),n=o.localeComparator();i.sort((function(t,e){return o.sort(t.breakpoint,e.breakpoint,-1,n)}));for(var a=0;a<i.length;a++){var r=i[a];e+="\n @media screen and (max-width: ".concat(r.breakpoint,") {\n .p-carousel[").concat(this.attributeSelector,"] .p-carousel-item {\n flex: 1 0 ").concat(100/r.numVisible,"%\n }\n }\n ")}}this.carouselStyle.innerHTML=e},isVertical:function(){return"vertical"===this.orientation},isCircular:function(){return this.value&&this.d_circular&&this.value.length>=this.d_numVisible},isAutoplay:function(){return this.autoplayInterval&&this.allowAutoplay},firstIndex:function(){return this.isCircular()?-1*(this.totalShiftedItems+this.d_numVisible):-1*this.totalShiftedItems},lastIndex:function(){return this.firstIndex()+this.d_numVisible-1},ariaSlideNumber:function(t){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.slideNumber.replace(/{slideNumber}/g,t):void 0},ariaPageLabel:function(t){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g,t):void 0}},computed:{totalIndicators:function(){return this.value?Math.max(Math.ceil((this.value.length-this.d_numVisible)/this.d_numScroll)+1,0):0},backwardIsDisabled:function(){return this.value&&(!this.circular||this.value.length<this.d_numVisible)&&0===this.d_page},forwardIsDisabled:function(){return this.value&&(!this.circular||this.value.length<this.d_numVisible)&&(this.d_page===this.totalIndicators-1||0===this.totalIndicators)},ariaSlideLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.slide:void 0},ariaPrevButtonLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.prevPageLabel:void 0},ariaNextButtonLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.nextPageLabel:void 0},attributeSelector:function(){return r()}},components:{ChevronRightIcon:i,ChevronDownIcon:t,ChevronLeftIcon:e,ChevronUpIcon:n},directives:{ripple:a}};function P(t){return P="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},P(t)}function k(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,n)}return i}function O(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?k(Object(i),!0).forEach((function(e){T(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):k(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function T(t,e,i){var n;return(e="symbol"==P(n=L(e,"string"))?n:String(n))in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function L(t,e){if("object"!=P(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var n=i.call(t,e||"default");if("object"!=P(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}var B=["aria-live"],D=["disabled","aria-label"],N=["data-p-carousel-item-active","data-p-carousel-item-start","data-p-carousel-item-end"],R=["aria-hidden","aria-label","aria-roledescription","data-p-carousel-item-active","data-p-carousel-item-start","data-p-carousel-item-end"],E=["disabled","aria-label"],j=["data-p-highlight"],F=["tabindex","aria-label","aria-current","onClick"];A.render=function(t,e,i,n,a,s){var o=u("ripple");return d(),h("div",m({class:t.cx("root"),role:"region"},t.ptm("root")),[t.$slots.header?(d(),h("div",m({key:0,class:t.cx("header")},t.ptm("header")),[p(t.$slots,"header")],16)):f("",!0),v("div",m({class:[t.cx("content"),t.contentClass]},t.ptm("content")),[v("div",m({class:[t.cx("container"),t.containerClass],"aria-live":a.allowAutoplay?"polite":"off"},t.ptm("container")),[t.showNavigators?b((d(),h("button",m({key:0,type:"button",class:t.cx("previousButton"),disabled:s.backwardIsDisabled,"aria-label":s.ariaPrevButtonLabel,onClick:e[0]||(e[0]=function(){return s.navBackward&&s.navBackward.apply(s,arguments)})},O(O({},t.prevButtonProps),t.ptm("previousButton")),{"data-pc-group-section":"navigator"}),[p(t.$slots,"previousicon",{},(function(){return[(d(),g(y(s.isVertical()?"ChevronUpIcon":"ChevronLeftIcon"),m({class:t.cx("previousButtonIcon")},t.ptm("previousButtonIcon")),null,16,["class"]))]}))],16,D)),[[o]]):f("",!0),v("div",m({class:t.cx("itemsContent"),style:[{height:s.isVertical()?t.verticalViewPortHeight:"auto"}],onTouchend:e[2]||(e[2]=function(){return s.onTouchEnd&&s.onTouchEnd.apply(s,arguments)}),onTouchstart:e[3]||(e[3]=function(){return s.onTouchStart&&s.onTouchStart.apply(s,arguments)}),onTouchmove:e[4]||(e[4]=function(){return s.onTouchMove&&s.onTouchMove.apply(s,arguments)})},t.ptm("itemsContent")),[v("div",m({ref:"itemsContainer",class:t.cx("itemsContainer"),onTransitionend:e[1]||(e[1]=function(){return s.onTransitionEnd&&s.onTransitionEnd.apply(s,arguments)})},t.ptm("itemsContainer")),[s.isCircular()?(d(!0),h(I,{key:0},_(t.value.slice(-1*a.d_numVisible),(function(e,i){return d(),h("div",m({key:i+"_scloned",class:t.cx("itemCloned",{index:i,value:t.value,totalShiftedItems:a.totalShiftedItems,d_numVisible:a.d_numVisible})},t.ptm("itemCloned"),{"data-p-carousel-item-active":-1*a.totalShiftedItems===t.value.length+a.d_numVisible,"data-p-carousel-item-start":0===i,"data-p-carousel-item-end":t.value.slice(-1*a.d_numVisible).length-1===i}),[p(t.$slots,"item",{data:e,index:i})],16,N)})),128)):f("",!0),(d(!0),h(I,null,_(t.value,(function(e,i){return d(),h("div",m({key:i,class:t.cx("item",{index:i}),role:"group","aria-hidden":s.firstIndex()>i||s.lastIndex()<i||void 0,"aria-label":s.ariaSlideNumber(i),"aria-roledescription":s.ariaSlideLabel},t.ptm("item"),{"data-p-carousel-item-active":s.firstIndex()<=i&&s.lastIndex()>=i,"data-p-carousel-item-start":s.firstIndex()===i,"data-p-carousel-item-end":s.lastIndex()===i}),[p(t.$slots,"item",{data:e,index:i})],16,R)})),128)),s.isCircular()?(d(!0),h(I,{key:1},_(t.value.slice(0,a.d_numVisible),(function(e,i){return d(),h("div",m({key:i+"_fcloned",class:t.cx("itemCloned",{index:i,value:t.value,totalShiftedItems:a.totalShiftedItems,d_numVisible:a.d_numVisible})},t.ptm("itemCloned")),[p(t.$slots,"item",{data:e,index:i})],16)})),128)):f("",!0)],16)],16),t.showNavigators?b((d(),h("button",m({key:1,type:"button",class:t.cx("nextButton"),disabled:s.forwardIsDisabled,"aria-label":s.ariaNextButtonLabel,onClick:e[5]||(e[5]=function(){return s.navForward&&s.navForward.apply(s,arguments)})},O(O({},t.nextButtonProps),t.ptm("nextButton")),{"data-pc-group-section":"navigator"}),[p(t.$slots,"nexticon",{},(function(){return[(d(),g(y(s.isVertical()?"ChevronDownIcon":"ChevronRightIcon"),m({class:t.cx("nextButtonIcon")},t.ptm("nextButtonIcon")),null,16,["class"]))]}))],16,E)),[[o]]):f("",!0)],16,B),s.totalIndicators>=0&&t.showIndicators?(d(),h("ul",m({key:0,ref:"indicatorContent",class:[t.cx("indicators"),t.indicatorsContentClass],onKeydown:e[6]||(e[6]=function(){return s.onIndicatorKeydown&&s.onIndicatorKeydown.apply(s,arguments)})},t.ptm("indicators")),[(d(!0),h(I,null,_(s.totalIndicators,(function(e,i){return d(),h("li",m({key:"p-carousel-indicator-"+i.toString(),class:t.cx("indicator",{index:i})},t.ptm("indicator",s.getIndicatorPTOptions(i)),{"data-p-highlight":a.d_page===i}),[v("button",m({class:t.cx("indicatorButton"),type:"button",tabindex:a.d_page===i?"0":"-1","aria-label":s.ariaPageLabel(i+1),"aria-current":a.d_page===i?"page":void 0,onClick:function(t){return s.onIndicatorClick(t,i)}},t.ptm("indicatorButton",s.getIndicatorPTOptions(i))),null,16,F)],16,j)})),128))],16)):f("",!0)],16),t.$slots.footer?(d(),h("div",m({key:1,class:t.cx("footer")},t.ptm("footer")),[p(t.$slots,"footer")],16)):f("",!0)],16)};export{A as default};