Refactor #3965 - Update for Carousel

components/lib/carousel/BaseCarousel.vue

@@ -75,11 +75,22 @@ const styles = `
 `;
 
 const classes = {
-    root: ({ instance }) => ['p-carousel p-component', { 'p-carousel-vertical': instance.isVertical(), 'p-carousel-horizontal': !instance.isVertical() }],
+    root: ({ instance }) => [
+        'p-carousel p-component',
+        {
+            'p-carousel-vertical': instance.isVertical(),
+            'p-carousel-horizontal': !instance.isVertical()
+        }
+    ],
     header: 'p-carousel-header',
-    content: ({ props }) => ['p-carousel-content ', props.contentClass],
+    content: 'p-carousel-content',
-    container: ({ props }) => ['p-carousel-container', props.containerClass],
+    container: 'p-carousel-container',
-    previousButton: ({ instance }) => ['p-carousel-prev p-link', { 'p-disabled': instance.backwardIsDisabled }],
+    previousButton: ({ instance }) => [
+        'p-carousel-prev p-link',
+        {
+            'p-disabled': instance.backwardIsDisabled
+        }
+    ],
     previousButtonIcon: 'p-carousel-next-icon',
     itemsContent: 'p-carousel-items-content',
     itemsContainer: 'p-carousel-items-container',
@@ -87,18 +98,32 @@ const classes = {
         'p-carousel-item p-carousel-item-cloned',
         {
             'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
-            'p-carousel-item-start': 0 === index,
+            'p-carousel-item-start': index === 0,
             'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index
         }
     ],
     item: ({ instance, index }) => [
         'p-carousel-item',
-        { 'p-carousel-item-active': instance.firstIndex() <= index && instance.lastIndex() >= index, 'p-carousel-item-start': instance.firstIndex() === index, 'p-carousel-item-end': instance.lastIndex() === index }
+        {
+            'p-carousel-item-active': instance.firstIndex() <= index && instance.lastIndex() >= index,
+            'p-carousel-item-start': instance.firstIndex() === index,
+            'p-carousel-item-end': instance.lastIndex() === index
+        }
+    ],
+    nextButton: ({ instance }) => [
+        'p-carousel-next p-link',
+        {
+            'p-disabled': instance.forwardIsDisabled
+        }
     ],
-    nextButton: ({ instance }) => ['p-carousel-next p-link', { 'p-disabled': instance.forwardIsDisabled }],
     nextButtonIcon: 'p-carousel-prev-icon',
-    indicators: ({ props }) => ['p-carousel-indicators p-reset', props.indicatorsContentClass],
+    indicators: 'p-carousel-indicators p-reset',
-    indicator: ({ instance, i }) => ['p-carousel-indicator', { 'p-highlight': instance.d_page === i }],
+    indicator: ({ instance, index }) => [
+        'p-carousel-indicator',
+        {
+            'p-highlight': instance.d_page === index
+        }
+    ],
     indicatorButton: 'p-link',
     footer: 'p-carousel-footer'
 };

components/lib/carousel/Carousel.vue

@@ -3,8 +3,8 @@
         <div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
-        <div :class="cx('content')" v-bind="ptm('content')">
+        <div :class="[cx('content'), contentClass]" v-bind="ptm('content')">
-            <div :class="cx('container')" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('container')">
+            <div :class="[cx('container'), containerClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('container')">
                 <button v-if="showNavigators" v-ripple type="button" :class="cx('previousButton')" :disabled="backwardIsDisabled" :aria-label="ariaPrevButtonLabel" @click="navBackward" v-bind="{ ...prevButtonProps, ...ptm('previousButton') }">
                     <slot name="previousicon">
                         <component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" :class="cx('previousButtonIcon')" v-bind="ptm('previousButtonIcon')" />
@@ -17,15 +17,11 @@
                             <div
                                 v-for="(item, index) of value.slice(-1 * d_numVisible)"
                                 :key="index + '_scloned'"
-                                :class="
+                                :class="cx('itemCloned', { index, value, totalShiftedItems, d_numVisible })"
-                                    cx('itemCloned', {
-                                        index,
-                                        value,
-                                        totalShiftedItems,
-                                        d_numVisible
-                                    })
-                                "
                                 v-bind="ptm('itemCloned')"
+                                :data-p-carousel-item-active="totalShiftedItems * -1 === value.length + d_numVisible"
+                                :data-p-carousel-item-start="index === 0"
+                                :data-p-carousel-item-end="value.slice(-1 * d_numVisible).length - 1 === index"
                             >
                                 <slot name="item" :data="item" :index="index"></slot>
                             </div>
@@ -33,33 +29,20 @@
                         <div
                             v-for="(item, index) of value"
                             :key="index"
-                            :class="
+                            :class="cx('item', { index })"
-                                cx('item', {
-                                    index
-                                })
-                            "
                             role="group"
                             :aria-hidden="firstIndex() > index || lastIndex() < index ? true : undefined"
                             :aria-label="ariaSlideNumber(index)"
                             :aria-roledescription="ariaSlideLabel"
                             v-bind="ptm('item')"
+                            :data-p-carousel-item-active="firstIndex() <= index && lastIndex() >= index"
+                            :data-p-carousel-item-start="firstIndex() === index"
+                            :data-p-carousel-item-end="lastIndex() === index"
                         >
                             <slot name="item" :data="item" :index="index"></slot>
                         </div>
                         <template v-if="isCircular()">
-                            <div
+                            <div v-for="(item, index) of value.slice(0, d_numVisible)" :key="index + '_fcloned'" :class="cx('itemCloned', { index, value, totalShiftedItems, d_numVisible })" v-bind="ptm('itemCloned')">
-                                v-for="(item, index) of value.slice(0, d_numVisible)"
-                                :key="index + '_fcloned'"
-                                :class="
-                                    cx('itemCloned', {
-                                        index,
-                                        value,
-                                        totalShiftedItems,
-                                        d_numVisible
-                                    })
-                                "
-                                v-bind="ptm('itemCloned')"
-                            >
                                 <slot name="item" :data="item" :index="index"></slot>
                             </div>
                         </template>
@@ -72,18 +55,8 @@
                     </slot>
                 </button>
             </div>
-            <ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="cx('indicators')" @keydown="onIndicatorKeydown" v-bind="ptm('indicators')">
+            <ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicators'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicators')">
-                <li
+                <li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator')" :data-p-highlight="d_page === i">
-                    v-for="(indicator, i) of totalIndicators"
-                    :key="'p-carousel-indicator-' + i.toString()"
-                    :class="
-                        cx('indicator', {
-                            i
-                        })
-                    "
-                    :data-p-highlight="d_page === i"
-                    v-bind="ptm('indicator')"
-                >
                     <button
                         :class="cx('indicatorButton')"
                         type="button"