diff --git a/components/lib/carousel/Carousel.d.ts b/components/lib/carousel/Carousel.d.ts index 21b619de6..583b258c5 100755 --- a/components/lib/carousel/Carousel.d.ts +++ b/components/lib/carousel/Carousel.d.ts @@ -346,6 +346,10 @@ export interface CarouselSlots { * Custom next icon template. */ nexticon(): VNode[]; + /** + * Custom empty template. + */ + empty(): VNode[]; } /** diff --git a/components/lib/carousel/Carousel.vue b/components/lib/carousel/Carousel.vue index 314dab9a8..6c7a923a1 100755 --- a/components/lib/carousel/Carousel.vue +++ b/components/lib/carousel/Carousel.vue @@ -3,96 +3,95 @@
-
- - - + + +
+ + + {{ emptyMessageText }} +
@@ -190,77 +189,73 @@ export default { } }, updated() { - const isCircular = this.isCircular(); - let stateChanged = false; - let totalShiftedItems = this.totalShiftedItems; + if (!this.empty) { + const isCircular = this.isCircular(); + let stateChanged = false; + let totalShiftedItems = this.totalShiftedItems; - if (this.autoplayInterval) { - this.stopAutoplay(); - } - - if (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 page = this.d_page; - - if (this.totalIndicators !== 0 && page >= this.totalIndicators) { - page = this.totalIndicators - 1; - - this.$emit('update:page', page); - this.d_page = page; - - stateChanged = true; + if (this.autoplayInterval) { + this.stopAutoplay(); } - totalShiftedItems = page * this.d_numScroll * -1; + if (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; - if (isCircular) { - totalShiftedItems -= this.d_numVisible; - } + let page = this.d_page; - if (page === this.totalIndicators - 1 && this.remainingItems > 0) { - totalShiftedItems += -1 * this.remainingItems + this.d_numScroll; - this.isRemainingItemsAdded = true; - } else { - this.isRemainingItemsAdded = false; - } + if (this.totalIndicators !== 0 && page >= this.totalIndicators) { + page = this.totalIndicators - 1; + this.$emit('update:page', page); + this.d_page = page; + stateChanged = true; + } - if (totalShiftedItems !== this.totalShiftedItems) { - this.totalShiftedItems = totalShiftedItems; + totalShiftedItems = page * this.d_numScroll * -1; - stateChanged = true; - } + if (isCircular) { + totalShiftedItems -= this.d_numVisible; + } - this.d_oldNumScroll = this.d_numScroll; - this.d_oldNumVisible = this.d_numVisible; - this.d_oldValue = this.value; + if (page === this.totalIndicators - 1 && this.remainingItems > 0) { + totalShiftedItems += -1 * this.remainingItems + this.d_numScroll; + this.isRemainingItemsAdded = true; + } else { + this.isRemainingItemsAdded = false; + } - if(!this.empty) { + if (totalShiftedItems !== this.totalShiftedItems) { + this.totalShiftedItems = totalShiftedItems; + stateChanged = true; + } + + 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, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`; } - } - if (isCircular) { - if (this.d_page === 0) { - totalShiftedItems = -1 * this.d_numVisible; - } else if (totalShiftedItems === 0) { - totalShiftedItems = -1 * this.value.length; + if (isCircular) { + if (this.d_page === 0) { + totalShiftedItems = -1 * this.d_numVisible; + } else if (totalShiftedItems === 0) { + totalShiftedItems = -1 * this.value.length; - if (this.remainingItems > 0) { - this.isRemainingItemsAdded = true; + if (this.remainingItems > 0) { + this.isRemainingItemsAdded = true; + } + } + + if (totalShiftedItems !== this.totalShiftedItems) { + this.totalShiftedItems = totalShiftedItems; + + stateChanged = true; } } - if (totalShiftedItems !== this.totalShiftedItems) { - this.totalShiftedItems = totalShiftedItems; - - stateChanged = true; + if (!stateChanged && this.isAutoplay()) { + this.startAutoplay(); } } - - if (!stateChanged && this.isAutoplay()) { - this.startAutoplay(); - } }, beforeUnmount() { if (this.responsiveOptions) { @@ -610,9 +605,6 @@ export default { } }, computed: { - empty() { - return !this.value || this.value.length === 0; - }, totalIndicators() { return this.value ? Math.max(Math.ceil((this.value.length - this.d_numVisible) / this.d_numScroll) + 1, 0) : 0; }, @@ -633,6 +625,12 @@ export default { }, attributeSelector() { return UniqueComponentId(); + }, + empty() { + return !this.value || this.value.length === 0; + }, + emptyMessageText() { + return this.$primevue.config?.locale?.emptyMessage || ''; } }, components: {