Fixed primefaces#6264 - Carousel: Index is undefined in PassThroughOp…

…tions
LeaderbotX400 · Aug 29, 2024 · b443a01 · b443a01
1 parent 57718d4
commit b443a01
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 8 deletions.
diff --git a/packages/primevue/src/carousel/Carousel.d.ts b/packages/primevue/src/carousel/Carousel.d.ts
@@ -209,6 +209,25 @@ export interface CarouselContext {
      * @defaultValue false
      */
     highlighted: boolean;
+    /**
+     * Index of the item as a number.
+     */
+    index: number;
+    /**
+     * Current active state of the item as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current start state of the item as a boolean.
+     * @defaultValue false
+     */
+    start: boolean;
+    /**
+     * Current end state of the item as a boolean.
+     * @defaultValue false
+     */
+    end: boolean;
 }
 
 export interface CarouselResponsiveOptions {

diff --git a/packages/primevue/src/carousel/Carousel.vue b/packages/primevue/src/carousel/Carousel.vue
@@ -45,7 +45,7 @@
                             :aria-hidden="firstIndex() > index || lastIndex() < index ? true : undefined"
                             :aria-label="ariaSlideNumber(index)"
                             :aria-roledescription="ariaSlideLabel"
-                            v-bind="ptm('item')"
+                            v-bind="getItemPTOptions('item', index)"
                             :data-p-carousel-item-active="firstIndex() <= index && lastIndex() >= index"
                             :data-p-carousel-item-start="firstIndex() === index"
                             :data-p-carousel-item-end="lastIndex() === index"
@@ -78,15 +78,15 @@
                 </Button>
             </div>
             <ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicatorList'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicatorList')">
-                <li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator', getIndicatorPTOptions(i))" :data-p-active="d_page === i">
+                <li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="getIndicatorPTOptions('indicator', i)" :data-p-active="d_page === i">
                     <button
                         :class="cx('indicatorButton')"
                         type="button"
                         :tabindex="d_page === i ? '0' : '-1'"
                         :aria-label="ariaPageLabel(i + 1)"
                         :aria-current="d_page === i ? 'page' : undefined"
                         @click="onIndicatorClick($event, i)"
-                        v-bind="ptm('indicatorButton', getIndicatorPTOptions(i))"
+                        v-bind="getIndicatorPTOptions('indicatorButton', i)"
                     />
                 </li>
             </ul>
@@ -101,9 +101,9 @@
 </template>
 
 <script>
-import { UniqueComponentId } from '@primevue/core/utils';
-import { removeClass, addClass, find, findSingle, getAttribute, setAttribute } from '@primeuix/utils/dom';
+import { addClass, find, findSingle, getAttribute, removeClass, setAttribute } from '@primeuix/utils/dom';
 import { localeComparator, sort } from '@primeuix/utils/object';
+import { UniqueComponentId } from '@primevue/core/utils';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import ChevronLeftIcon from '@primevue/icons/chevronleft';
 import ChevronRightIcon from '@primevue/icons/chevronright';
@@ -272,12 +272,22 @@ export default {
         }
     },
     methods: {
-        getIndicatorPTOptions(index) {
-            return {
+        getIndicatorPTOptions(key, index) {
+            return this.ptm(key, {
                 context: {
                     highlighted: index === this.d_page
                 }
-            };
+            });
+        },
+        getItemPTOptions(key, index) {
+            return this.ptm(key, {
+                context: {
+                    index,
+                    active: this.firstIndex() <= index && this.lastIndex() >= index,
+                    start: this.firstIndex() === index,
+                    end: this.lastIndex() === index
+                }
+            });
         },
         step(dir, page) {
             let totalShiftedItems = this.totalShiftedItems;