Fixed #5474 - Carousel Enhancement - Empty Slot

components/lib/carousel/Carousel.d.ts

@@ -346,6 +346,10 @@ export interface CarouselSlots {
      * Custom next icon template.
      */
     nexticon(): VNode[];
+    /**
+     * Custom empty template.
+     */
+    empty(): VNode[];
 }
 
 /**

components/lib/carousel/Carousel.vue

@@ -3,8 +3,7 @@
         <div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
-        <div :class="[cx('content'), contentClass]" v-bind="ptm('content')">
-            <template v-if="!empty">
+        <div v-if="!empty" :class="[cx('content'), contentClass]" v-bind="ptm('content')">
             <div :class="[cx('container'), containerClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('container')">
                 <button
                     v-if="showNavigators"
@@ -89,10 +88,10 @@
                     />
                 </li>
             </ul>
-            </template>
-            <slot name="empty" v-else>
-            </slot>
         </div>
+        <slot v-else name="empty">
+            {{ emptyMessageText }}
+        </slot>
         <div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
             <slot name="footer"></slot>
         </div>
@@ -190,6 +189,7 @@ export default {
         }
     },
     updated() {
+        if (!this.empty) {
             const isCircular = this.isCircular();
             let stateChanged = false;
             let totalShiftedItems = this.totalShiftedItems;
@@ -205,10 +205,8 @@ export default {
 
                 if (this.totalIndicators !== 0 && page >= this.totalIndicators) {
                     page = this.totalIndicators - 1;
-
                     this.$emit('update:page', page);
                     this.d_page = page;
-
                     stateChanged = true;
                 }
 
@@ -227,18 +225,14 @@ export default {
 
                 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;
-
-            if(!this.empty) {
                 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) {
@@ -261,6 +255,7 @@ export default {
             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: {